platform-customsdeclaration-ssr/components/base/table/Ctable.vue

<template>
  <div class="address">
    <ul class="headTable clearfix">
      <li v-for="(item, index) in headArr" :class="'top_' + index" :style="getWidth(index)" >
        {{item}}
      </li>
    </ul>
    <ul class="contentTable clearfix" v-if="data.length > 0">
      <li v-for="(item, index) in data" :class="'clearfix content_' + index" :style="getHeight()" v-bind:key="index" @dblclick="clickTwo(index)">
        <div class="item" v-for="(childrenItem, childrenIndex) in item" v-bind:key="childrenIndex + 'child'" :style="getStyle(childrenIndex)">
          <template v-if="childrenItem === '操作' ">
            <div class="control">
              <div v-for="(control, controlIndex) in controlArray" v-bind:key="controlIndex" @click="controlClick(index, controlIndex)" class="controlItem" :class="{controlHeight : controlStyle !== 'row'}">
                {{control[0]}}
              </div>
            </div>
          </template>

          <template v-else-if="childrenItem === '序号' ">
            {{index + 1}}
          </template>

          <template v-else-if="childrenItem !== undefined && childrenItem[0] !== '' && childrenItem[0] === '规格书'">
            <a :href="childrenItem[1]" v-if="childrenItem[1]" class="guigeshu" target="_blank">
            </a>
            <span v-else>-</span>
          </template>

          <template v-else-if="childrenItem !== undefined && childrenItem[0] && childrenItem[0] === '设为默认'">
            <div class="setAuto" :class="{active : childrenItem[1] === 1}" @click="setAuto(index)">
              <i class="el-icon-success"></i>
              {{childrenItem[1] === 1 ? '默认地址' : '设为默认'}}
            </div>
          </template>

          <template v-else-if="childrenItem !== undefined && childrenItem[0] && childrenItem[0] === '报关单'">
            <div class="control">
              <div v-for="(control, controlIndex) in controlArray" v-bind:key="controlIndex" class="controlItem">
                <a :href="control[1] + childrenItem[1]">{{control[0]}}</a>
              </div>
            </div>
          </template>

          <template v-else-if="childrenItem !== undefined && childrenItem[0] && childrenItem[0] === '时间戳'">
            {{childrenItem[1]}}
          </template>

          <template v-else>
            <!-- 这里加多一个是为了解决处理父元素 display:table带来的影响，导致文本不能垂直居中问题 -->
            <div :style="getWidth2(childrenIndex)">{{childrenItem || '-'}}</div>
          </template>
        </div>
      </li>
    </ul>
    <div class="block clearfix" v-if="totalElements > 10" >
      <div class="pull-right">
        <el-pagination
          @current-change='handleCurrentChange'
          :current-page.sync='currentPage1'
          :page-size='10'
          layout='prev, pager, next'
          :total='totalElements'
        >
        </el-pagination>
        <ul class="pagination" style="float:right;margin: 0px;margin-left:20px;">
          <li>
            <input type="number" class="page-number" @keyup.13="changePage" v-model="currentPage2">
          </li>
          <li>
            <a class="page-a" @click="changePage">GO</a>
          </li>
        </ul>
      </div>
    </div>
    <div v-else-if="totalElements === 0" class="noContent" v-show="showNoCannet">
      <div>暂无数据</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      headArr: {
        type: Array,
        default: []
        // default: ['联系人', '联系地址', '联系电话', '操作', '']
      },
      StyleWidth: {
        type: Array,
        default: []
        // default: [180, 524, 170, 164, 124]
      },
      StyleHeight: {
        type: Number,
        default: 60
      },
      // 这一块传进来的数据源
      data: {
        type: Array,
        // default: [['张三', '李四', '王五', '操作', ['设为默认', '1']]]
        default: []
      },
      controlArray: {
        type: Array,
        default: []
        // default: [['编辑', 'updateItem'],['删除', 'deleteItem']]
        // [['显示文本', '执行函数']]
      },
      currentPage: {
        type: Number,
        default: 1
      },
      totalElements: {
        type: Number,
        default: 1
      },
      controlStyle: {
        type: String,
        default: 'row'
      },
      showNoCannet:{
        type: Boolean,
        default: true
      }
    },
    watch: {
      currentPage(newVal) {
        this.currentPage2 = newVal
        this.currentPage1 = newVal
      }
    },
    data() {
      return {
        currentPage1: 1,
        currentPage2: this.currentPage
      }
    },
    methods: {
      changePage() {
        this.currentPage1 = this.currentPage2
        this.handleCurrentChange(this.currentPage1)
      },
      // 控制点击
      controlClick(index, controlIndex) {
        // index 为当前点击的这一行的索引 controlIndex 为当前所点击的控制器按钮的索引
        this.$emit(this.controlArray[controlIndex][1], index)
      },
      // 设为默认
      setAuto(index) {
        this.$emit('setAutoFn', index)
      },
      // 双击
      clickTwo(index) {
        this.$emit('clickTwo', index)
      },
      // 分页调整数据
      handleCurrentChange (page) {
        this.$emit('handleCurrentChange', page)
      },
      getWidth(i) {
        return {
          width: this.StyleWidth[i] + 'px'
        }
      },
      getWidth2(i) {
        return {
          // 这里减22是因为，父元素 display: table-cell带来的影响
          width: this.StyleWidth[i] - 22 + 'px'
        }
      },
      getHeight() {
        return {
          minHeight: this.StyleHeight + 'px'
        }
      },
      getStyle(i) {
        if (i % 2 == 0) {
          return {
            width: this.StyleWidth[i] + 'px',
            minHeight: this.StyleHeight + 'px',
            borderLeft: '1px solid rgba(0, 0, 0, 0)',
            borderRight: '1px solid rgba(0, 0, 0, 0)'
          }
        } else {
          return {
            width: this.StyleWidth[i] + 'px',
            minHeight: this.StyleHeight + 'px',
            borderLeft: '1px solid #f0f7fe',
            borderRight: '1px solid #f0f7fe'
          }
        }
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
  .pull-right div {
    display: inline-block;
  }
  .address {
    padding: 0 12px;
  }
  .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
  }
  .pagination>li {
    display: inline;
  }
  input.page-number {
    vertical-align: inherit;
    display: inline-block;
    width: 40px;
    height: 31px;
    padding: 6px 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #9B9792;
    text-align: center;
    background-color: #F6F5F4;
    background-image: none;
    border: 1px solid #c9c9c9;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }
  .page-a {
    background: #0d5ffe !important;
    color: #fff !important;
    float: right!important;
  }
  .page-a {
    color: #fff;
    border-color: #0d5ffe;
    padding: 6px 6px!important;
    font-size: 14px!important;
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
    text-decoration: none;
    height: 31px;
  }
  .headTable{
    height: 48px;
    line-height: 48px;
    /*background: #f6f6f6;*/
    border: 1px solid #ebeef5;
    background: #deeffe;
    font-size: 14px;
    color: #333;
    &::after {
      clear: both;
      display: block;
      content: ' ';
      visibility: hidden;
      zoom: 1;
    }
    li {
      text-align: center;
      float: left;
      border-right:1px solid #ebeef5;
      &:nth-last-of-type(1) {
        border-right: 0px;
      }
    }
  }
  .contentTable {
    border: 1px solid #ebeef5;
    /*border-top: 0px;*/
    &::after {
      clear: both;
      display: block;
      content: ' ';
      visibility: hidden;
      zoom: 1;
    }

    li {
      display: table;
      &:nth-child(2n) {
        background: #f0f7fe;
      }
      &:nth-child(2n - 1) {
        background: #fff;
      }
      .item {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        /*float: left;*/
        position: relative;
        word-wrap:break-word;
        padding: 10px;
        .control {
          .controlItem {
            display: inline-block;
            color: #666;
            font-size: 12px;
            margin-right: 10px;
            width: 48px;
            height: 26px;
            line-height: 26px;
            &.controlItem {
              margin-right: 0px;
            }
            &:hover {
              color: #fff;
              cursor: pointer;
              background: #f97f25;
              a {
                color: #fff !important;
              }
            }
            &:nth-last-of-type(1) {
              margin-right: 0px
            }
          }
        }
        .setAuto {
          color: #666;
          font-size: 12px;
          cursor: pointer;
          &.active {
            color: #f97f25
          }
          &:hover {
            color: #f97f25
          }
        }
      }
      &.justly {
        line-height: 24px;
      }
      .guigeshu {
        width: 39px;
        height:39px;
        background: url(/spirit.png) no-repeat 0px -100px;
        margin: 0 auto;
        cursor: pointer;
        display: block;
      }
    }
  }
  .noContent {
    border: 1px solid #ebeef5;
    /*border-top: 0px;*/
    color: #909399;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .block {
    .pull-right {
      margin-right: 10px;
      margin-top: 20px;
    }
  }
  input.page-number {
    -moz-appearance:textfield;
  }
  input.page-number::-webkit-inner-spin-button,
  input.page-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .el-pager li{
    color: #0d5ffe;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #c9c9c9;
    font-size: 10px;
    min-width: 33px;
    height: 30px;
    border-right: none;
  }
  .el-pager li:not(.active):hover, .el-pagination button:hover {
    z-index: 3;
    color: #fff;
    background-color: #0d5ffe;
    border-color: #c9c9c9;
  }
  .el-pager li.active {
    background: #0d5ffe!important;
    color:#fff;
  }
  .el-pagination {
    padding: 0;
  }
  .el-pagination .btn-next, .el-pagination .btn-prev {
    color: #0d5ffe;
    width: 33px;
    height: 30px;
  }
  .el-pagination .btn-next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #c9c9c9;
    padding-left: 8px;
  }
  .el-pagination .btn-prev {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid #c9c9c9;
    border-right:0;
    padding-right: 8px;
  }
  .el-icon-arrow-left:before {
    content: "\f100";
    font-family: FontAwesome;
  }
  .el-icon-arrow-right:before {
    content: "\f101";
    font-family: FontAwesome;
  }
</style>