element-ui中table多选框带分页，点击分页保存上一页的数据

最近遇到一个需求，就是在使用element-ui框架中table多选框加分页，发现第一个选中的数据，再点击第二页的时候消失了，于是加了如下的代码：

<el-table
:data="resDataList"
style="width:100%"
@select="handleSelectionChange"
@select-all="handleSelectionChange"
ref="multipleTable"
:row-key="getRowKeys"
>

<el-table-column
type="selection"
:reserve-selection="true"
width="55">
</el-table-column>

<el-table-column
fixed
prop="insuredName"
:width="commentTableWidth.tableWidthSmall"
label="姓名">
</el-table-column>

</el-table>

script里面如下：

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

需求基本是可以实现了，但是等等~~，

我在刷新页面的时候数据之前选中的数据消失了，而且跳转到下一个页面，在返回的时候数据也消失了，于是，做了一下的操作，而且在查询条件的时候也会有问题。

// 选择
handleSelectionChange(val) {
// 页面在刷新的时候会清掉选中，这里需要保存一下状态
    setSession("insuranceInfo",val);
},

注意： 这里的setSession是我自己封装好的小工具类

然后在请求列表数据的时候匹配回显一下

xhrQueryList() {
let insuranceInfo = getSession('insuranceInfo') || [];
let insuranceInfoTemp = [];

this.$http.postPerSonList(this.paramQuery).then(res => {
    if (res.statusCode === HTTP_CODE.suc) {
    
        this.resDataList = res.data.list;
        
        for (let item of this.resDataList) {
            for(let type of this.insuredStatus){
                if(type.value == item.insuredState){
                    item.insuredState = type.label
               }
            }
        }

        //需要更新一下缓存数据
        insuranceInfo.forEach(val=>{
            if(item.identNo == val.identNo){
                insuranceInfoTemp = insuranceInfoTemp.concat(item)

                setTimeout(() => {
                    this.$refs.multipleTable.toggleRowSelection(item,true);
                }, 100);
            }
        });
    }
});
},

这样的话解决了~~~