element-ui对el-table组件进行二次封装，并进行功能扩展

扩展功能：

1. 实现使用Ctrl/Shift+鼠标左键不连续/连续选择，并支持批量勾选（具体看handleRowClick）

Ctrl+鼠标左键（不连续选择）：

• 使用变量缓存当前选中行集合，el-table绑定row-class-name函数，判断目标行是否被选中，选中则添加自定义类名
• 监听row-click事件，事件触发时判断Ctrl键是否按下，若按下，则将此行添加到选中行集合

Shift+鼠标左键（连续选择）：

• 思路同上，过判断的keyCode不一样
• row-click事件中需要分别计算当前行和点击行的序号，根据序号将区间内的所有行数据取出并缓存。

批量勾选：

• 监听select事件，判断是否勾选，并对所有选中行调用toggleRowSelection方法

效果：

2. 实现正选反选当前行（具体看handleRowClick）

监听row-click，判断点击行是否为当前行，若是调用setCurrentRow()，反之调用setCurrentRow(row)

效果：

PS:

• 选中是选中，勾选是勾选，不要混淆概念了，勾选是el-table内部实现的
• 要实现以上两个功能，一定不要再去监听current-change事件了，需要自己对当前行进行处理，按照el-table的逻辑，current-change事件永远发生在row-click事件之前，所以你在row-click获取到的当前行永远都是点击行

3. 将数据导出为excel时，使用el-table的列标题作为导出后的列标题（具体看getColumnLabelMap）

思路：获取el-table实例的columns属性，里面包含了每一列的列标题（label）
效果：

4. 对row-click进行延时消抖，即触发row-dblclick不再会触发row-click事件（外部监听_row-click，具体看rowClickDeb变量）

效果：

5. 根据当前页码、页大小，显示行号

效果：

实现代码

<template>
  <el-table class="uiot-table"
            :class="{'has-rowcheckbox':showRowCheckbox}"
            ref="table"
            v-loading="loading"
            :row-key="rowKey"
            :border="border"
            :default-sort="defaultSort"
            :highlight-current-row="highlightCurrentRow"
            :data="tableRows"
            :header-row-style="customHeadRowStyle"
            :header-cell-style="customHeadCellStyle"
            :cell-style="customCellStyle"
            :row-style="customRowStyle"
            :height="height"
            :max-height="maxHeight"
            :cell-class-name="customCellClassName"
            :row-class-name="customRowClassName"
            :current-row-key.sync="currentRowKey"
            v-bind="$attrs"
            v-on="$listeners"
            @sort-change="handleSortChange"
            @header-click="handleHeaderClick"
            @row-click="handleRowClick"
            @row-dblclick="handleRowDBlClick"
            @current-change="handleCurrentRowChange"
            @select="handleRowCheck"
            @selection-change="handleSelectionChange">
    <template v-if="$scopedSlots.default||(columns&&columns.length>0)">
      <el-table-column v-if="showRowCheckbox"
                       type="selection"
                       width="50px"
                       align="center">
      </el-table-column>
      <el-table-column v-if="showLinenum"
                       type="index"
                       label="No."
                       header-align="center"
                       align="center"
                       :width="$idxNoWidth"
                       :index="getRowIndex">
      </el-table-column>
    </template>
    <!-- 如果有slot则渲染slot -->
    <template v-if="!$scopedSlots.default&&columns">
      <el-table-column v-for="(col,index) of columns"
                       :key="index"
                       v-bind="col" />
    </template>
    <slot v-else></slot>
  </el-table>
</template>

<script>
import { exportTo } from '@/utils/exportTo'

function parseOrder(order) {
  return typeof order === 'boolean' ? (order ? 'ascending' : 'descending') : order
}

const computed = {
  /** @returns {Vue} */
  table() {
    return this.$refs.table
  },
  border() {
    return this.tableStyle == 'normal'
  },
  /** @this {number} */
  outsideHeight() {
    return this.$el.clientHeight
  },
  clearSelection() {
    return this.table?.clearSelection
  },
  toggleRowSelection() {
    return this.table?.toggleRowSelection
  },
  toggleAllSelection() {
    return this.table?.toggleAllSelection
  },
  toggleRowExpansion() {
    return this.table?.toggleRowExpansion
  },
  clearSort() {
    return this.table?.clearSort
  },
  clearFilter() {
    return this.table?.clearFilter
  },
  doLayout() {
    return this.table?.doLayout
  },
  store() {
    return this.table?.store
  },
  // el-table内部的currentRow
  _currentRow() {
    return this.store?.states.currentRow
  },
  /** @returns {any[]} */
  _rowSelection() {
    return this.store?.states.selection
  },
}

export default {
  inheritAttrs: false,
  name: 'UiotTable',
  props: {
    /** 是否显示loading */
    loading: {
      type: Boolean,
      default: false,
    },
    /** 自定义列，优先级小于slot.default */
    columns: Array,
    /** 数据源 */
    tableRows: {
      type: Array,
      default: () => []
    },
    /** 表格排序参数 */
    tableSort: Object,
    /** 行数据主键属性 */
    rowKey: {
      type: String,
      default: 'id'
    },
    /** 当前页码 */
    pageIndex: Number,
    /** 页大小 */
    pageSize: Number,
    /** 当前选中行，支持双向绑定*/
    currentRow: Object,
    /** 是否可以反选当前行，即点击当前行时取消选中状态 */
    reverseCurrentRow: Boolean,
    /** 是否显示行号 */
    showLinenum: {
      type: Boolean,
      default: true,
    },
    /** 是否在每行前面显示复选框 */
    showRowCheckbox: {
      type: Boolean,
      default: false,
    },
    /** 表格风格,用于控制样式 */
    tableStyle: {
      type: String,
      validator: value => ['normal', 'concise'].indexOf(value) > -1
    },
    /** 原生属性 */
    size: {
      type: String,
      default: 'mini',
    },
    /** 原生属性 */
    height: {
      type: [String, Number],
      default: '100%',
    },
    /** 原生属性 */
    maxHeight: {
      type: [String, Number],
      default: '100%',
    },
    /** 原生属性，高亮当前行 */
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    /** 原生属性[只写]  -> ps: 设置此属性只会在外观上改变当前行 */
    currentRowKey: [String, Number],
    /** 当前勾选行集合，支持双向绑定 */
    rowSelection: Array,
    /** 原生属性 */
    cellStyle: Function,
    /** 原生属性 */
    rowStyle: Function,
    /** 原生属性 */
    rowClassName: Function,
    /** 原生属性 */
    cellClassName: Function,
  },
  created() {
    // debounce请自己实现
    this.rowClickDeb = this.$utils.debounce((row, column, event) => {
      this.$emit('_row-click', row, column, event)
    }, 300)
  },
  mounted() {
    if (this.tableSort) {
      this.setDefaultSort(this.tableSort.field || '', this.tableSort.order)
    }
    console.log('uiot-table -> mounted', this.table, this.store)
  },
  data() {
    return {
      rowClickDeb: null,
      defaultSort: {
        prop: '',
        order: 'ascending',
      },
      lastTableRows: null,
      cacheData: {
        // 此变量的作用是在handleRowClick事件后才更新当前行，目前仅供reverseCurrentRow功能使用
        // 因为el-table在rowclick事件触发时，内部先处理了当前行，然后再抛出此事件，这样的话参数中的row永远都是当前行
        currentRow: null,
        lastRow: null,
        pageIndex: 1,
        pageSize: 1
      },
      selectedRows: [],
      selectedRange: [-1, -1],
    }
  },
  computed: computed,
  watch: {
    'tableSort.default'(nval) {
      // 备份当前sort
      const { field, order } = this.tableSort
      // 获取到默认sort
      this.tableSort.default()
      // 设置默认sort
      this.setDefaultSort(this.tableSort.field, this.tableSort.order)
      // 还原sort
      this.tableSort.field = field
      this.tableSort.field = order
    },
    showLinenum(val) {
      if (val) {
        if (typeof this.pageIndex != 'number') throw '如果显示行号，必须传入"pageIndex"属性'
        if (typeof this.pageSize != 'number') throw '如果显示行号，必须传入"pageSize"属性'
      }
    },
    tableRows(nval, oval) {
      // 如果有当前行，则清除
      if (this.cacheData.currentRow) {
        this.setCurrentRow()
      }
      this.$nextTick(() => {
        if (this.doLayout) this.doLayout()

        // 只有数据源改变了才去更新页码和页大小，否则还在loading状态，行号就已经变了，视觉效果不好
        this.cacheData.pageIndex = this.pageIndex || 1
        this.cacheData.pageSize = this.pageSize || 1
      })
    },
    currentRow(nval, oval) {
      if (nval != this.cacheData.currentRow) {
        // 这里一定要nextTick，因为在watch表格数据源变化时，会清除当前行
        this.$nextTick(() => this.setCurrentRow(nval))
      }
    }
  },
  methods: {
    // #region 方法
    scrollTo() {
      this.table?.$refs.bodyWrapper?.scrollTo(...arguments)
    },
    sort(prop, order) {
      return this.table?.sort(prop, parseOrder(order))
    },
    setDefaultSort(prop, order) {
      this.defaultSort.prop = prop ?? ''
      this.defaultSort.order = parseOrder(order)
    },
    /**
     * 重写setCurrentRow方法，请勿调用el-table提供的setCurrentRow
     */
    setCurrentRow(row = null) {
      if (this.cacheData.currentRow != row) {

        this.cacheData.lastRow = this.cacheData.currentRow
        this.cacheData.currentRow = row

        if (this.currentRow != this.cacheData.currentRow) {
          this.$emit('update:currentRow', this.cacheData.currentRow)
        }
        this.$emit('_current-change', this.cacheData.currentRow, this.cacheData.lastRow)

        console.log('表格当前行改变 -> ', 'currentRow', this.cacheData.currentRow, 'lastRow', this.cacheData.lastRow)
      }

      if (this._currentRow != row) {
        // 如果el-table内部的当前行不是传入的row，则更新一下
        this.table.setCurrentRow(row)
      }
    },
    // #endregion

    // #region 事件处理
    handleRowCheck(selection, row) {
      if (this.showRowCheckbox && this.selectedRows.length > 0 && this.selectedRows.includes(row)) {
        const check = selection.includes(row)
        for (const row of this.selectedRows) {
          this.toggleRowSelection(row, check)
        }
      }
    },
    /**
     * @param {MouseEvent} event
     */
    handleRowClick(row, column, event) {
      event.preventDefault()

      console.log('row-click -> ', row, column, event)
      this.rowClickDeb(row, column, event)

      if (this.showRowCheckbox) {
        if (!this.tableRows && this.selectedRows.length > 0) {
          this.selectedRows = []
          return
        }

        if (event.shiftKey && this.cacheData.currentRow) {
          // 找出上一次点击行与当前点击行的序号
          this.selectedRows = []
          window.getSelection().removeAllRanges()
          let startNo = this.tableRows.findIndex((item) =>
            this.cacheData.currentRow && item === this.cacheData.currentRow
          )
          let endNo = this.tableRows.findIndex((item) => item === row)

          if (startNo != -1 && endNo != -1) {
            // 正序一下
            if (startNo > endNo) {
              let temp = endNo
              endNo = startNo
              startNo = temp
            }
            for (let i = startNo; i <= endNo; i++) {
              this.selectedRows.push(this.tableRows[i])
            }
            console.log('多选', startNo, endNo, this.selectedRows)
            // 多选不需要设置当前行
            return
          }
        }
        else if (event.ctrlKey) {
          if (this.selectedRows.includes(row)) {
            this.selectedRows.$remove(row)
          }
          else {
            this.selectedRows.push(row)
          }
          this.table.setCurrentRow()
          return
          // if()
          // this.toggleRowSelection(row)
        }
      }

      if (this.selectedRows.length > 0) this.selectedRows = []
      if (this.reverseCurrentRow && row === this.cacheData.currentRow) {
        this.setCurrentRow()
      }
      else {
        this.setCurrentRow(row)
      }

    },
    handleRowDBlClick() {
      this.rowClickDeb.cancel()
      console.log('row-dblclick -> ')
    },
    handleHeaderClick() {
    },
    handleCurrentRowChange(newRow, oldRow) {
      // this.cacheData.lastRow = oldRow
      // if (this.currentRow != newRow) {
      //   this.$emit('update:currentRow', newRow)
      // }
      // console.log('表格当前行改变 -> ', newRow, oldRow)
    },
    handleSortChange({ column, prop, order }) {
      console.log(column, prop, order)
      if (typeof this.tableSort == 'object') {
        if (order) {
          this.tableSort.field = prop
          this.tableSort.order = order === 'descending' ? false : true
        }
        else if (typeof this.tableSort.default == 'function') {
          this.tableSort.default()
        }
        else {
          this.tableSort.field = this.defaultSort.prop
          this.tableSort.order = this.defaultSort.order === 'descending' ? false : true
        }
      }
      // this.$emit('sort-change', ...arguments)
    },
    handleSelectionChange(val) {
      if (typeof this.rowSelection != 'object') throw '如果开启了"showRowCheckbox", 必须传入"rowSelection"'
      this.$emit('update:rowSelection', val)
    },
    // #endregion

    getRowIndex(index) {
      return index + 1 + (this.cacheData.pageIndex - 1) * this.cacheData.pageSize //this.loading ? index + 1 + (this.lastPageIndex - 1) * this.lastPageSize : index + 1 + (this.pageIndex - 1) * this.pageSize
    },
    /**
     * 获取table的列头文本（获取到的是i18n翻译后的）
     */
    getColumnLabelMap() {
      const columnLabelMap = {}
      for (const col of this.table.columns) {
        if ((!this.showLinenum && col.type == 'index') || col.type === 'selection') continue
        if (col.property && col.label) {
          columnLabelMap[col.property] = col.label
        }
      }
      return columnLabelMap
    },
    exportTo({ showLinenum = false, columnMap, name }) {
      if (this.tableRows && this.tableRows.length > 0 && this.table.columns.length > 0) {

        columnMap = columnMap ? columnMap : this.getColumnLabelMap()

        // 替换列标题
        const data = this.tableRows.map((row) => {
          const temp = {}
          for (const key in columnMap) {
            // label : value
            temp[columnMap[key]] = row[key]
          }
          return temp
        })
        exportTo({
          data: data,
          dataType: 'json',
          fileName: name
        })
      }
    },

    // #region 样式、类重载
    customCellClassName({ row, column, rowIndex, columnIndex }) {
      let clsname = ''
      if (this.cellClassName) clsname += this.cellClassName(arguments[0]) || ''
      return clsname.trim()

    },
    customRowClassName({ row, rowIndex }) {
      let clsname = ''
      if (this.showRowCheckbox) {
        // if (this._rowSelection && this._rowSelection.indexOf(row) != -1) {
        //   clsname += ' is-checked'
        // }
        // if (rowIndex >= this.selectedRange[0] && rowIndex <= this.selectedRange[1]) {
        // 如果是选中行，添加css类
        if (this.selectedRows.includes(row)) {
          clsname += ' is-selected'
        }
      }
      if (this.rowClassName) clsname += this.rowClassName(arguments[0]) || ''
      return clsname.trim()
    },
    // #region 表格样式
    customHeadCellStyle({ row, column, rowIndex, columnIndex }) {
      switch (this.tableStyle) {
        case 'concise':
          return 'padding:0px;height:30px;'
        case 'normal':
        default:
          return {
            background: '#f0f0f0',
            color: '#505050',
            padding: 0,
            height: '34px'
          }
      }
    },
    customHeadRowStyle({ row, rowIndex }) {
      switch (this.tableStyle) {
        case 'concise':
        case 'normal':
        default:
          return ''
      }
    },
    customRowStyle({ row, rowIndex }) {
      switch (this.tableStyle) {
        case 'concise':
          return ''
        case 'normal':
        default:
          return ''
      }
    },
    customCellStyle({ row, column, rowIndex, columnIndex }) {
      switch (this.tableStyle) {
        case 'concise':
          return { padding: '2px 0 2px 0' }
        case 'normal':
        default:
          return { padding: '3px 0 3px 0' }
      }
    },
    // #endregion 
  }
}
</script>

<style lang='scss'>
.uiot-table {
}
</style>