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

问题描述

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

解决方案

1.在table一定要定义以下事件和列表属性：

row-key //写在table标签上
reserve-selection // 写在有选择框的那一列上

<el-table @selection-change="handleSelectionChange" :row-key="getRowKeys">
　　......
 </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" ref="multiTable" :row-key="getRowKeys">
　　......
 </el-table>

2、清空数据

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

confirm(){
this.dialogvisible=false //关闭弹框
this.$refs.multiTable.clearSelection() //清除选中的数据
}

注：也可以在弹框刚打开的时候进行清空，在这里加个判断，判断是否有选中的数据，如果有执行this.$refs.multiTable.clearSelection() ，如果没有就不用清空。