elementUI table 分页多选，翻页回显选中

需求：table表单多选后，翻页之后返回，前一页选中数据保持选中状态，且选中数据包含多页勾选的数据。

实现方法：

1. html部分

<el-table size="small" 
  :data="listData" 
  ref="multipleTable" 
  row-key="getRowKeys" 
  @select="handleCheckBox" 
  @select-all="handleSelectAll"
>
</el-table>

export default {
  data() {
    return {
     listData: [],
     multipleSelection: [],
    }
  }
}

2. methods中方法

    // 每行唯一 行标识key
    getRowKeys(row){
      return row.userGuid;
    },
    // 单选时的方法
    handleCheckBox(rows, row) {      
      if (this.multipleSelection.find((item) => item.userGuid == row.userGuid)) {
        //过滤（删除）
        this.multipleSelection = this.multipleSelection.filter(
          (item) => item.userGuid != row.userGuid
        );
      } else {
        this.multipleSelection.push(row);
      }
    },
    // 当页全选的方法
    handleSelectAll(rows) {
      if (rows.length) {
        rows.forEach((row) => {
          if (!this.multipleSelection.find((item) => item.userGuid == row.userGuid)) {
            this.multipleSelection.push(row);
          }
        });
      } else {
        this.listData.forEach((row) => {
          this.multipleSelection = this.multipleSelection.filter(
            (item) => item.userGuid != row.userGuid
          );
        });
      }
    },

3. 回显部分

      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const { data, code, total } = await this.Service.getdataList({
        ...this.searchForm,
      })
      if (data && code == 1) {
        loading.close();
        this.listData = data.list;
        this.total = data.total;
        this.$nextTick(()=>{
          this.listData.forEach((item,index)=>{
            if(this.multipleSelection.findIndex(v=>v.userGuid == item.userGuid) >= 0){
              this.$refs.multipleTable.toggleRowSelection(
                  this.$refs.multipleTable.data[index],
                  true
              );
            }
          })
        })
      }