有时候需要弹出一个窗口带一个table，来分页多选；

比如弹出一个窗口来选人，人员信息是分页的

1 selection列reserve-selection使用起来，监听selection-change事件获得跨页选择的内容

首先选中的那一列就是边上的checkbox

      <el-table
        :data="pageinfo.records"
        class="mini-table"
        ref="userSelectTable"
        border
        style="width: 100%"
        :height="270"
        :max-height="270"
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" :reserve-selection="true">

1.1 实现row-key

下面是element-ui官方对row-key的解释:
  行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

  这个里是getRowKeys的实现，这类返回的是能够表示每一个人的pkId

    getRowKeys(row) {
      return row.pkId;
    },

1.2 reserve-selection设置成true

下面是element-ui官方对reserve-selection的解释:
  仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

1.3 监听selection-change获得跨页选中的行的数据

    handleSelectionChange (selectedRows) {
      console.log(selectedRows)
    },

1.3 clearSelection的实现

    clearSelection() {
      if (this.$refs["userSelectTable"]) {
        this.$refs["userSelectTable"].clearSelection();
      }
    },

2 如果要之前选中的内容，再次在分页的table里面再次选中

需要监听select-all，select事件函数里面做一下处理

image.png

2.1 需要监听一下table的显示或者隐藏

2.1.1 增加一个multipleSelection来保存或者初始化已经选中的数据，还有一些props

  //组件的属性
  props: {
   // 是否显示dialog + 用户选择的table
    showDialog: {
      type: Boolean,
      default: false,
    },
// 当前已经选中的用户
    curSelectedUsers: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      // 用来保存当前的选中
      multipleSelection: [],
    };
  },
// 计算属性
  computed: {
    // 根据当前的multipleSelection得到对应选中的pkId
    curSelectedRowIds() {
      let result = [];
      if (this.multipleSelection && this.multipleSelection.length > 0) {
        result = this.multipleSelection.map((user) => user.pkId);
      }
      return result;
    },
  },

2.1.2 监听table的显示或者隐藏，初始化multipleSelection的值

  watch: {
    showDialog: {
      handler(newValue) {
        if (newValue) {
          this.multipleSelection = this.$_.cloneDeep(this.curSelectedUsers);
          this.rowMultipleChecked();
        } else {
          this.clearSelection();
        }
      },
      immediate: true,
      deep: true,
    },
  },

2.2 需要监听select-all和select事件来

      <el-table
        :data="pageinfo.records"
        class="mini-table"
        ref="userSelectTable"
        border
        style="width: 100%"
        :height="270"
        :max-height="270"
        :row-key="getRowKeys"
        @select-all="handleSelectionChange"
        @select="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" :reserve-selection="true">

下面是handleSelectionChange的

    /**
     * @param selection 选中的rows
     * @param changedRow 变化的row
     */
    handleSelectionChange(selection, changedRow) {
      // 检查有没有新增的，有新增的就push
      if (selection && selection.length > 0) {
        selection.forEach((row) => {
          if (this.curSelectedRowIds.indexOf(row.pkId) < 0) {
            this.multipleSelection.push(row);
          }
        });
      }
     // 如果当前的selection没有changedRow，表示changedRow被cancel了，
     // 如果this.multipleSelection有这一条，需要splice掉
      if (row && selection.indexOf(changedRow) < 0) {
        if (this.curSelectedRowIds.indexOf(changedRow.pkId) > -1) {
          for (let index = 0; index < this.multipleSelection.length; index++) {
            if (row.pkId === this.multipleSelection[index].pkId) {
              this.multipleSelection.splice(index, 1);
              break;
            }
          }
        }
      }
     // 如果当前一条都没有选中，表示都没有选中，则需要把当前页面的rows都遍历一下，splice掉没选中的
      if (selection.length === 0) {
        this.pageinfo.records.forEach((row) => {
          let index = this.curSelectedRowIds.indexOf(row.pkId);
          if(index > -1) {
              this.multipleSelection.splice(index, 1);
         }
        });
      }
    },

2.3 每次翻页的时候，需要把已经选中的行toggleRowSelection(row, true)一下

   // 分页查询的函数
    query(pageInfo) {
      this.pageinfo.isSearching = true;
      UserApi.findBulletinUsers(genPageRequestVo(pageInfo))
        .then((response) => {
          this.pageinfo.isSearching = false;
          this.pageinfo.total = response.data.total;
          this.pageinfo.records = response.data.records;
          this.pageinfo.current = response.data.current;
          // 每次都调用一下rowMultipleChecked，来把已经选中的check一下
          this.rowMultipleChecked();
        })
        .catch((e) => {
          this.pageinfo.isSearching = false;
          console.log("searchBulletin failed", e);
        });
    },
    rowMultipleChecked() {
      if (
        this.curSelectedRowIds &&
        this.curSelectedRowIds.length > 0 &&
        this.pageinfo &&
        this.pageinfo.records &&
        this.pageinfo.records.length > 0
      ) {
        this.$nextTick(() => {
         // 触发一下选中
          this.pageinfo.records.forEach((row) => {
            if (this.curSelectedRowIds.indexOf(row.pkId) > -1) {
              this.$refs["userSelectTable"].toggleRowSelection(row, true);
            }
          });
        });
      }
    },