elementui 的表格分页切换时 选中数据不丢失

背景介绍

我这边有个表格，需要将选中的数据给它保存起来，但是我分页切换的时候，选中的数据没有了，我需要在切换分页时，保存我当前页的数据，比方说当前第一页选中5条，然后跳转到第二页，选中6条数据，再回到第一页，勾选中的数据依然是选中状态

1. 注册一个存选中数据的变量

export default{
    data(){
        return{
          tableSelectList:[],      //所有选中的数据，根据页码的一个二维数组
          queryList:{              //打开弹窗的请求参数
              pageSize:10,     //一页十条数据
              pageNum:1,
          },
          tableData:[]     //表格的数据列表
        }
    }
}

2. 在talbe中绑定selection-change的事件，监听表格中的选中项，最主要是当取消选中的时候，也能触发selection-change的事件

<el-table :data="tableData" @selection-change="getChooseItem" ref="multipleTable">

</el-table>

3. 通过当前分页的页码，给当前页选中的值进行赋值

getChooseItem(value){      //表格选中项切换的事件  @selection-change
   this.tableSelectList[this.queryList.pageNum]=value;
}

4. 写一个默认值渲染的方法，在分页切换的时候调用这个方法，这里有一个坑是不用nextTick()会无效，因为设置选中的时候，DOM还没构建好，就会无法选中

tableDefaultSelect(){
    let rows=[];     //先定义一个选中行的数组
    if(JSON.stringify(this.tableSelectList)!=='[]'){     //先判定是否有值 
        let arr=this.tableSelectList.flat();              //将数组进行降维打击
        for(let i in arr){              
            //ES6新出的findIndex，返回符合条件的索引位置，有则返回，无则返回-1，唯一标识id请根据实际修改
            if(this.tableData.findIndex(x=>x.id===arr[i].id)>=0){    
                rows.push(this.tableData.findIndex(x=>x.id===arr[i].id));
            }
        }
        this.$nextTick(()=>{    //等dom更新之后再选中，并且表格一定要设置ref
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(this.tableData[row]);
                })}
          });
    }
},
//分页切换的时候请求接口，然后调用渲染默认值的方法
changePage(current){
    this.queryList.pageNum=current;
    //调用接口拉取到数据之后再调用渲染默认值的方法，调用接口请自行补充
    this.tableDefaultSelect();
},

5. 最后拿到选中的数据保存

gs_save(){
    let arr=this.tableSelectList.flat();
    //arr就是所有选中的数据
}