element-plus组件库table多选实现跨页

element-plus的多选表格支持跨页，只需要在el-table设置row-key属性，然后在type="selection"的列设置:reserve-selection="true"即可跨页保存选项。

那么，如果想要自己实现，该如何做呢？

基本思路：使用es6的map储存已经勾选的变量，当翻页、跳页或者分页规格改变的时候，利用table的toggleRowSelection方法将当前分页下存在于map的选项勾选上。

代码如下：

import { ElTable } from 'element-plus'

/**
 * 表格多选，可支持跨页
 * 把选项中具有唯一值的属性`key`作为`Map`的`key`，已选选项作为`Map`的`value`，构建哈希表储存在`selectionMap`中
 * 如果支持跨页，需要使用el-table的`@select`和`@select-all`事件，
 * 如果不支持跨页，则仅需要使用el-table的`@selection-change`事件，
 * 并在回调函数中执行对应的方法即可
 * @param {keyof T} key 每个选项中具有唯一值的属性`key`
 * @param {boolean} pageSpread 是否支持跨页，默认支持
 * @returns 返回`selectionMap`的属性和操作`selectionMap`的方法，避免直接操作`selectionMap`
 */
export function tableMultiSelection<T>(key: keyof T, pageSpread = true) {

  // 初始化`selectionMap`，用来保存已经勾选的选项
  const selectionMap: Map<T[keyof T], T> = new Map()

  /**
   * 当用户手动勾选数据行的 Checkbox 时执行此方法
   * @param row 当前选中或取消选中的选项
   * @returns 
   */
  const onSelect = (row: T) => {
    if (!pageSpread) return
    // 如果selectionMap有row，说明是用户取消勾选，否则是用户勾选
    if (selectionMap.has(row[key])) {
      selectionMap.delete(row[key])
    } else {
      selectionMap.set(row[key], row)
    }
  }

  /**
   * 当用户手动勾选全选 Checkbox 时执行此方法
   * @param selection 当前页所有的选中的选项
   * @