vue：elementUI表格封装

<template>
  <div ref="table">
    <el-row>
      <el-table
        :border="columnsBorder"
        v-loading="loading"
        :height="tableHeight"
        :data="tableData"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        @row-dblclick="rowDblClick"
        @row-click="rowClick"
        @cell-click="cellClick"
        @select="select"
      >
        <el-table-column
          v-if="isShowSelection"
          type="selection"
          align="center"
          :selectable="isSelectable"
        ></el-table-column>
        <el-table-column
          type="index"
          :index="(index) => index + (currentPage - 1) * pageSize + 1"
          align="center"
          :label="$t('columns.index')"
          :resizable="true"
          v-if="isShowSerialNumber"
          width="100px"
        >
        </el-table-column>
        <template v-for="k in tableColumns">
          <el-table-column
            :show-overflow-tooltip="true"
            :resizable="true"
            v-if="k.visible || !k.hasOwnProperty('visible')"
            align="center"
            :prop="k.prop"
            :label="k.label"
            :key="k.prop"
            :fixed="k.fixed"
            :sortable="k.sort ? 'custom' : false"
            :width="k.width === 'all' ? null : (k.width || 180)"
          >
            <slot :name="k.prop" :data="scope" slot-scope="scope">{{
              scope.row[k.prop]
            }}</slot>
          </el-table-column>
        </template>
        <el-table-column
          :min-width="operationWidth"
          align="center"
          :fixed="fixedType ? 'right' : fixedType"
          :label="$t('columns.operation')"
          v-if="isShowOperation"
        >
          <slot name="operation" slot-scope="scope" :data="scope"></slot>
        </el-table-column>
        <template slot="empty">
          <el-empty :description="$t('columns.empty')"></el-empty>
        </template>
      </el-table>
    </el-row>
    <el-pagination
      class="pagination"
      background
      v-if="isPaging && total > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      layout="sizes,total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'Mytable',
  /*
  columnsBorder 表头边框 开启表头可拖动 boolean	false 
  isShowSelection	是否开启选择功能	boolean	false
  isShowSerialNumber	是否显示序号	boolean	false
  isShowOperation	是否显示操作列	boolean	true
  operationWidth 固定操作列最小列宽 String ''
  isPaging	是否有分页	boolean	true
  fixedType	是否固定右侧操作栏	boolean	true
  tableColumns	列标题以及对应的参数名数组	Array	[]
  tableDataObj	后台返回的数据
    Object	{
        rows:[{}],
        total:0
    }
  loading 表格loading 默认false
  sort 对应列是否可以排序
  isSelectable: Function 返回值用来决定这一行的 CheckBox 是否可以勾选
  */
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    operationWidth: {
      type: String,
      default: "",
    },
    columnsBorder: {
      type: Boolean,
      default: false,
    },
    isShowSelection: {
      type: Boolean,
      default: false,
    },
    isShowSerialNumber: {
      type: Boolean,
      default: false,
    },
    isShowOperation: {
      type: Boolean,
      default: true,
    },
    isPaging: {
      type: Boolean,
      default: true,
    },
    fixedType: {
      // 是否固定右侧操作栏
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    sort: {
      type: Array,
      default: () => [],
    },
    tableDataObj: {
      type: Object,
      default: () => {}
    },
    tableColumns: {
      type: Array,
      default: () => [],
    },
    isSelectable: Function,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      tableHeight: null,
      selectRows: [],
    };
  },
  mounted() {
    this.tableInit();
  },
  watch: {
    tableDataObj(val) {
      this.tableInit();
    },
  },
  methods: {
    tableInit() {
      if (this.isPaging) {
        // 有分页
        if (Object.keys(this.tableDataObj).length<1) {
          this.total = 0;
          this.tableData = [];
        } else {
          this.total = this.tableDataObj.total;
          this.tableData =this.tableDataObj.rows;
        }
      } else {
        // 没有分页
        this.tableData =this.tableDataObj.rows
      }
    },
    // 切页触发
    handleCurrentChange(index) {
      this.$emit("handleCurrentChange", index);
    },
    // 改变每页条数触发
    handleSizeChange(index) {
      this.$emit("handleSizeChange", index);
    },
    handleSortChange(val) {
      this.$emit("sortChange", val);
    },
// 表格行双击事件
    rowDblClick(val) {
      this.$emit("row-dblclick", val);
    },
    // 表格行单击事件
    rowClick(val) {
      this.$emit("row-click", val);
    },
    // 表格单元格单击事件
    cellClick(row, column, cell, event) {
      this.$emit("cell-click", row, column, cell, event);
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.selectRows = val;
      this.$emit("selection-change", val);
    },
    // 手动勾选数据行的 Checkbox 时触发的事件
    select(val) {
      this.$emit("select", val);
    },
  },
};
</script>
<style>
.pagination {
  display: flex;
  justify-content: flex-end;
  padding: 20px 16px 0px;
}
.el-table--border {
  border: 0;
}
.el-table--border td {
  border-right: 0;
}
</style>