Vue + Element + Table 分页选择勾选 和取消勾选的问题

Vue + Element + Table 分页选择勾选 和取消勾选的问题

问题描述： 需求是这样的===》表格前面每条数据都有复选框吧 然后表格有很多页 ， 我从第一页选取N条数据 再去其他页选取M条数据 同时对选中的这M+N条数据进行一系列操作（如：批量删除、添加、修改等等吧，按自己需求来） 但是发现 在第一页选取数据之后 再去其他页再去选取数据 然后回到第一页 第一页选取的数据已经不是勾选状态了 这样就不符合我的需求了 就是切换页码 在回到之前 之前的选中状态已经清除了 但是这并不是我想要的 我想要无论我在哪页选取数据 切换页码 不改变选中状态 那么怎么解决呢？不说了 上代码

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数组中
},

到现在已经实现我的需求了 but并没有结束 新的问题又来了 我对选取的这些数据进行这一系类操作点了确定之后 表格中的数据仍然是我刚才勾选的状态 怎么清空呢 有人说 刷新表格数据呗 不好意思 不生效 也不太符合逻辑 好了 不说了 上代码

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() //清除选中的数据
}

有些人可能想 我在弹框刚打开的时候清除不可以嘛 可以 但是 你有想过吗 如果此时本来就没选中 你怎么清除 这时就会报错 说clearSection()未定义 所以这时你应该加个判断 判断是有有选中的数据 如果有执行 this.$refs.multiTable.clearSelection() 如果没有就不用清空 对不对

大功告成 如果对你有帮助那最好 只为记录笔记 加油 在那些奋斗的日子里 虽然不容易 但是能学到一点是一点吧 加油奥利给！！！