vxeTable 复选框分页数据记忆选中问题

先介绍一下表格的配置

需要添加checkbox-change事件

配置checkbox-config的reserve和checkRowKeys属性，checkRowKeys的值为selectionRows，用于盛放我们要选中的数据id

着重介绍一下selectChangeEvent事件

  selectChangeEvent({ checked, records, reserves, row }) {
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0) {
            //选中的行id数组
          this.selectedRowKeys = records.map((v) => v.id);
            //选中的行数据
          this.selectionRows = records;
        } else {
          //id集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [
            ...reserves.map((v) => v.id),
            ...records.map((v) => v.id),
          ];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records];
        }
        console.log(this.selectionRows);
        console.log(this.selectedRowKeys);
      } else {
        //取消选中时
        let idIndex = this.selectedRowKeys.indexOf(row.id);
        if (idIndex > -1) {
          //删除取消选中删除指定元素id
          this.$delete(this.selectedRowKeys, idIndex);
        }

        let dataIndex = null;
        for (let i = 0; i < this.selectionRows.length; i++) {
          if (this.selectionRows[i].id == row.id) {
            dataIndex = i;
            break;
          }
        }
        //删除取消选中的元素整个对象
        this.$delete(this.selectionRows, dataIndex);
        console.log(this.selectionRows);
        console.log(this.selectedRowKeys);
      }
    },

写到这里我们已经成功了一大部分了，但是还没达到我们想要的效果，最重要的是最后一步，就是在分页事件中给我们已经选中的数据添加选中状态

//selectList为已经选中的数据 
this.selectList.forEach((item) => {
            //tableData为表格数据
            this.tableData.forEach((it) => {
              if (item.id == it.id) {
                //翻页选中逻辑
                this.$refs.table.setCheckboxRow(it, true);
                console.log(item);
              }
            });
          });

 上面的方法写到翻页的查询逻辑中

这样我们就实现了vxeTable表格翻页后记忆选中行功能了