怎样解决ElementUI下table多选分页后选中回显、勾选分页后不保存问题

怎样解决ElementUI下table多选分页后选中回显、勾选分页后不保存问题

问题描述
table表格有很多页，每个页勾选了之后，切换分页，之前的页里所勾选的内容会被清空，现在想要解决此问题，切换分页不清空之前的勾选内容，代码如下：

解决方案

1.在table一定要定义以下事件和列表属性：
row-key //写在table标签上
reserve-selection // 写在有选择框的那一列上

<el-table @selection-change="handleSelectionChange" :row-key="getRowKeys" ref="multiTable">
        ......
</el-table>  
<!-- 写在table标签上 -->

<el-table-column type="selection" :reserve-selection="true" width="40" align="center">
</el-table-column>   
<!-- // 写在有选择框的那一列上 type 必须为 selection -->

2、在data上定义row-key绑定的

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

3、把勾选的数据传到后台所以在methods定义

handleSelectionChange(val) {
       this.multipleSelection = val;//勾选放在multipleSelection数组中
},

注：此时问题已解决，但是怎样进行清空已经选择的数据呢，代码如下。

使用后怎样清空数据
1、在表格上操作dom元素，设置ref属性

<el-table @selection-change="handleSelectionChange" :row-key="getRowKeys" ref="multiTable">
       ......
</el-table>  

2、清空数据
在你点完确定后，调用此方法。比如是弹框，有个确定按钮，绑定的click事件为confirm，在methods里写confirm方法。

confirm(){
     this.dialogvisible=false //关闭弹框
     this.clearSelection() //调用定义的清除选中数据的方法
},
//清除选中的数据
clearSelection(){
     this.$nextTick(()=>{
         this.$refs.table.clearSelection()  //elementUI 官方文档的方法 不过直接使用会报错
     })
}

若直接使用 不用$nextTick()方法  直接使用 this.$refs.table.clearSelection() 就会报下面错误