Vue封装table组件

Vue封装table组件，业务需求不同，封装的table也不一样↓↓↓

<!--公用table组件-->
<template>
  <div class="commonTableOut">
    <el-table class="commonTable"
              :height="height"
              :data="tableData"
              v-loading="loading"
              :border="border"
              :cell-class-name="cellClassName"
              ref="Table"
              empty-text="暂无数据"
              @filter-change="filterChange"
              @row-click="rowClick"
              @cell-click="cellClick"
              @selection-change="selectionChange"
              @sort-change="sortChange">
      <el-table-column v-if="selectableObj.isSel"
                       type="selection"
                       width="52"
                       :selectable="selectable">
      </el-table-column>

      <el-table-column v-for="th in tableColumn"
                       v-if="!th.isHide"
                       :key="th.key"
                       :prop="th.key"
                       :label="th.title"
                       :render-header="th.renderHeader"
                       :min-width="th.minWidth?th.minWidth:120"
                       :show-overflow-tooltip="true"
                       :fixed="th.fixed"
                       :sortable="th.sortable||false"
                       :sort-method="th.sortMethod"
                       :filters="th.filters"
                       :filtered-value="th.filteredValue"
                       :column-key="th.columnKey"
                       :filter-multiple="th.filterMultiple||false">
        <template slot-scope="scope" v-if="th.type!=='selection'">
          <ex-slot v-if="th.render" :render="th.render" :row="scope.row" :index="scope.$index" :column="th"/>
          <span v-else-if="th.type=='date'">
            {{ scope.row[th.key]?new Date(scope.row[th.key]).format('yyyy-MM-dd'):'--' }}
          </span>
          <span v-else>{{ scope.row[th.key] || (typeof scope.row[th.key]=='number'?scope.row[th.key]: '--') }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  // 自定义内容的组件
  var exSlot = {
    functional: true,
    props: {
      row: Object,
      render: Function,
      index: Number,
      column: {
        type: Object,
        default: null
      }
    },
    render: (h, data) => {
      const params = {
        row: data.props.row,
        index: data.props.index
      }
      if (data.props.column) params.column = data.props.column
      return data.props.render(h, params)
    }
  }
  export default {
    name: 'commonTable',
    components: {exSlot},
    props: {
      cellClassName: {
        type: String,
        default: ''
      },
      height: {
        type: String,
      },
      loading: {
        type: Boolean,
        // 默认值为false
        default: false
      },
      border: {
        type: Boolean,
        // 默认值为false
        default: false
      },
      // 表格数据
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 表头数据
      tableColumn: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 选择列
      selectableObj: {
        type: Object,
        default: function () {
          return {
            isSel: false,
            key: '',
            value: ''
          }
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      // 排序事件
      sortChange(sort) {
        this.$emit('sort-change', sort)
      },
      // 筛选事件
      filterChange(filters) {
        this.$emit('filter-change', filters)
      },
      // 某一行被点击
      rowClick(row) {
        this.$emit('row-click', row)
      },
      //某个单元格被点击时
      cellClick(row, column, cell, event) {
        this.$emit('cell-click', row, column)
      },
      // 选择事件
      selectionChange(row) {
        this.$emit('selection-change', row)
      },
      // 设置某行是否可选
      selectable(row, index) {
        if (this.selectableObj.key) {
          return row[this.selectableObj.key] == this.selectableObj.value;
          this.$emit('selectable', row, index)
        } else {
          return true
        }
      }
    }
  }
</script>

<style lang="scss">
  .commonTableOut {
    padding: 10px 0;

    .commonTable {
      th {
        background-color: #F0F0F0;
        border-top: 1px solid #EBEEF5;
        padding: 0;
        font-weight: normal;

        &:first-child {
          padding-left: 10px;
        }
      }

      td {
        padding: 13px 0;
        color: #191F25;

        &:first-child {
          padding-left: 10px;
        }

        .mainFields {
          color: #333333;
        }

        .noMainFields {
          color: #666666;
        }

        .end {
          color: #FFAD28;
        }
      }

      .operation {
        span {
          font-size: 12px;
          padding: 0 8px;
          border-right: 1px solid #e8e8e8;
          cursor: pointer;

          &.blue {
            color: #1875F0;
          }

          &.red {
            color: #eb6751;
          }

          &:first-child {
            padding-left: 0;
          }

          &:last-child {
            padding-right: 0;
            border-right: 0;
          }
        }
      }

      .bluebus {
        span {
          cursor: pointer;

          &.blue {
            color: #1875F0;
          }
        }
      }

      .emp-name {
        img {
          height: 30px;
          width: 30px;
          margin-right: 10px;
        }
      }

      .tableImg {
        width: 60px;
        height: 60px;
      }

      .study-status {
        color: #1875F0;
      }

      .icon-radio-ok {
        margin-left: 10px;

        &:before {
          color: #1875F0;
        }
      }

      .el-table__empty-block {
        /*display: none;*/
      }

      .tableFilter {
        .icon-shaixuan {
          cursor: pointer;
          margin-left: 3px;
          position: relative;
          top: 1px;
          font-weight: normal;
        }
      }

      .el-table__column-filter-trigger {
        display: none;
      }

    }
  }
</style>