封装table组件

<template>
  <div class="common-table">
    <div class="table">
      <div v-if="title!==''">{{ title }}</div>
      <el-table
        ref="table"
        v-loading="loading"
        class="rl-table"
        :data="tableData"
        :max-height="height?height:475"
        :show-header="showHeader"
        header-cell-class-name="header-cell-class-name"
        :highlight-current-row="isHighlightCurrentRow"
        style="width: 100%;"
        :row-key="id"
        :tree-props="treeProps"
        @row-click="handleClickRow"
        @tableRowClassName="tableRowClassName"
        @cell-click="handleClickCell"
        @cell-dblclick="handleDblClickCell"
        @select="handleSelect"
        @select-all="handleSelectAll"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange">
        <el-table-column
          v-if="isSelectionHidden"
          :selectable="selectable"
          type="selection"
          width="45" />
        <el-table-column
          v-if="isDeleteHidden"
          width="30">
          <template slot-scope="scope">
            <div class="removeBtn el-icon-minus" @click="handleRemove(scope.row, scope.$index)" />
          </template>
        </el-table-column>
        <el-table-column
          v-if="isIndexHidden"
          label="序号"
          type="index"
          align="center"
          width="64">
          <template slot-scope="scope">
            {{ numberIndex(scope.$index) > 8 ? (numberIndex((scope.$index) + 1)) : ('0' + numberIndex(scope.$index + 1)) }}
          </template>
        </el-table-column>
        <!-- 1、column传入格式[{label: '', prop: '', align: '', sortable: false/true, scopeStatus: false/true, width: '', minWidth: ''},...] -->
        <template v-for="(item,index) in column">
          <el-table-column
            :key="index"
            :width="item.width?item.width:'auto'"
            :min-width="item.minWidth"
            :prop="item.prop"
            :fixed="item.fixed?item.fixed:false"
            :show-overflow-tooltip="item.tooltip?item.tooltip:false"
            :align="item.align?item.align:'center'"
            :sortable="item.sortable"
            :index="item.copy === '1'?1:null"
            :render-header="renderHeader"
            :label="item.label">
            <template slot-scope="scope">
              <!-- 自定义模板 -->
              <slot v-if="item.scopeStatus"
                    :name="item.prop"
                    :row="scope.row"
                    :$index="scope.$index" />
              <!--
                2、slot-scope="scope" 获取到el-table子组件的内容
                3、<slot v-if="item.scopeStatus" :name="item.prop" :row="scope.row"></slot>将子组件的内容传给父组件
                -->
              <template v-else>
                <template v-if="item.filters">
                  {{ item.filters(scope.row[item.prop],scope.row) }}
                </template>
                <template v-else>
                  {{ scope.row[item.prop] }}
                </template>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div v-if="isDeleteHidden" ref="addBtn" class="addBtn" @click="handleAdd">+</div>
    </div>
    <el-pagination
      v-if="showHide"
      class="pagination"
      :current-page="pageVo.currentPage"
      :page-sizes="[20, 50, 100, 200, 500]"
      :page-size="pageVo.pageSize"
      :layout="`prev, pager, next, slot${center ? '':', sizes'}`"
      background
      :pager-count="7"
      :total="pageVo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <span v-if="!center" class="total">显示第 {{ ((pageVo.currentPage - 1) * pageVo.pageSize) + 1 }} 到第 {{ pageVo.currentPage * pageVo.pageSize }} 条记录，总共 {{ pageVo.total }} 条记录每页显示</span>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'CommonTable',
  filters: {
    dataFormat(item, self) {
      // return
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    center: {
      type: Boolean,
      default: false
    },
    treeProps: {
      type: Object,
      default: () => { return { children: 'children', hasChildren: 'hasChildren' } }
    },
    showHide: {
      type: Boolean,
      default: true
    },
    isDeleteHidden: {
      type: Boolean,
      default: false
    },
    isSelectionHidden: {
      type: Boolean,
      default: true
    },
    isIndexHidden: {
      type: Boolean,
      default: true
    },
    isHighlightCurrentRow: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    id: {
      type: String,
      default: () => {
        return 'id'
      }
    },
    height: {
      type: Number,
      default: 0
    },
    column: {
      type: Array,
      default: () => {
        return []
      }
    },
    pageVo: {
      type: Object,
      default: () => {
        return {
          currentPage: 1,
          pageSize: 20,
          total: 0
        }
      }
    }
  },
  data() {
    return {
      color: '#A8A8A8'
    }
  },
  computed: {
    tableHeight() {
      return this.tableData.length * 60
    }
  },
  methods: {
    renderHeader(h, { column }) { // h即为cerateElement的简写，具体可看vue官方文档
      if (column.index === undefined || column.index === null) {
        return h(
          'div',
          [h('span', column.label)],
        )
      } else {
        return h(
          'div',
          [
            h('span', column.label),
            h('i', {
              class: 'el-icon-document-copy',
              style: 'margin-left:5px;color: #A8A8A8',
              on: {
                click: this.clickCopy
              }
            })
          ],
        )
      }
    },
    clickCopy(e) {
      this.$emit('clickCopy', e)
    },
    // 全选
    checkAll() {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleAllSelection()
    },
    numberIndex(index) {
      return (this.pageVo.currentPage - 1) * this.pageVo.pageSize + index
    },
    selectable(row, index) {
      if (row.isSend && row.isSend !== 0) {
        return !row.isSend
      } else {
        if (row.isCurrent !== 1 && row.isCurrent) {
          return false
        }
        return true
      }
    },
    // 添加事件
    handleAdd() {
      this.$emit('handleAdd')
    },
    // 删除事件
    handleRemove(row, index) {
      this.$emit('handleRemove', row, index)
    },
    // 勾选事件
    handleSelect(selection, row) {
      this.$emit('handleSelect', selection, row)
    },
    // 单击行触发
    handleClickRow(row, column, event) {
      this.$refs.table.toggleRowSelection(row)
      this.$emit('handleClickRow', row, column, event)
    },
    // 单击单元格
    handleClickCell(row, column, cell, event) {
      this.$emit('handleClickCell', row, column, cell, event)
    },
    // 双击单元格
    handleDblClickCell(row, column, cell, event) {
      this.$emit('handleDblClickCell', row, column, cell, event)
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    // 当选择全选按钮时触发
    handleSelectAll(selection) {
      this.$emit('handleSelectAll', selection)
    },
    // 当表格的 排序 条件发生变化的时候会触发该事件 val = { column, prop, order }
    handleSortChange(val) {
      this.$emit('handleSortChange', val)
    },
    // size下拉刷新，初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.$emit('handleSizeChange', size)
    },
    // currentPage 改变时会触发
    handleCurrentChange(currentPage) {
      this.$emit('handleCurrentChange', currentPage)
    },
    // 点击行获取行索引
    tableRowClassName({ row, rowIndex }) {
      this.$emit('tableRowClassName', { row, rowIndex })
    }
  }
}
</script>

<style lang='scss' scoped>
.common-table {
  .table {
    padding: 10px;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    margin-bottom: 10px;
    .rl-table {
      height: 100%;
    }
  }
}
</style>

<style lang='scss'>
@import '~@/styles/theme/themeVariable.scss';
.common-table {
  .rl-table {
    height: 100%;
  }
  .removeBtn {
    width:14px;
    height:14px;
    background:#cfcfcf;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 14px;
    cursor: pointer;
  }
  .addBtn {
    width:14px;
    height:14px;
    background: $buttonBanner;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 14px;
    margin: 10px;
    cursor: pointer;
  }
  .el-table .cell {
    text-overflow: clip;
  }
}
.el-pagination {
  text-align: right;
  width: calc(100% - 36px - 51px);
  position: relative;
  .el-pagination__sizes {
    float: left;
  }
  .total {
    color: #333;
    font-weight: 400;
    float: left;
  }
}
.el-dialog {
  .el-pagination {
    text-align: center;
    width: 100%;
  }
}
</style>