Vue表格封装

<template>
  <el-table ref="multipleTable"
            :data="data"
            style="width: 99.9%"
            @expand-change="expandSelect"
            :row-key="getRowKeys"
            header-row-class-name="tableName"
            :row-class-name="tableRowClassName"
            :expand-row-keys="expandRowKeys"
            @cell-dblclick="celldblclick"
            @cell-click="cellClick"
            :cell-style="cellStyle"
            @selection-change="handleSelectionChange"
            @row-click="handleRowClick"
            @row-dblclick="handleDbclick"
            :highlight-current-row="isHighLight"
            tooltip-effect="light"
            :row-style="rowClass"
            :selectArray="selectArray"
            :cell-class-name="cellclassname"
            :border="border">
    <slot></slot>
  </el-table>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: function () {
        return [];
      }
    },
    isHighLight: {
      type: Boolean,
      default: false
    },
    handleDbclick: {
      type: Function,
      default: function () {
        return [];
      }
    },
    cellStyle: {
      type: Function,
      default: function () {
        return [];
      }
    },
    handleSelectionChange: {
      type: Function,
      default: function () {
        return [];
      }
    },
    celldblclick: {
      type: Function,
      default: function () {
        return [];
      }
    },
    cellClick: {
      type: Function,
      default: function () {
        return [];
      }
    },
    cellclassname: {
      type: Function,
      default: function () {
        return [];
      }
    },
    expandSelect: {
      type: Function,
      default: function () {
        return [];
      }
    },
    border: {
      type: Boolean,
      default: false
    },
    rowKey: { type: String, default: '' },
    expandRowKeys: { type: Array, default: this.expands },
    selectArray: { type: Array, default: this.expands }
  },
  methods: {
    // 表格换色
    tableRowClassName ({ row, rowIndex }) {
      row.index = rowIndex;
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      }
    },
    // 选中样式
    rowClass ({ row, rowIndex }) {
      if (this.selectRow != undefined) {
        if (this.selectRow.length > 0) {
          if (this.selectRow.includes(row.id)) {
            return { 'background-color': '#e6f1fa!important' };
          }
        }
      }
    },
    handleRowClick (row) {
      this.$refs.multipleTable.toggleRowSelection(this.data[row.index]);
    }
  },
  data () {
    return {
      getRowKeys (row) {
        // 行数据的Key
        return row.id;
      },
      expands: [],
      selectRow: []
    };
  },
  watch: {
    selectArray (data) {
      this.selectRow = [];
      if (data.length > 0) {
        data.forEach(element => {
          this.selectRow.push(element.id);
        });
      }
    }
  }
};
</script>