Vue + Element + Table 分页选择勾选 和取消勾选的问题
Vue + Element + 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数组中
},
到现在已经实现我的需求了 but并没有结束 新的问题又来了 我对选取的这些数据进行这一系类操作点了确定之后 表格中的数据仍然是我刚才勾选的状态 怎么清空呢 有人说 刷新表格数据呗 不好意思 不生效 也不太符合逻辑 好了 不说了 上代码
1、在表格上操作dom元素 设置ref属性
<el-table @selection-change="handleSelectionChange" ref="multiTable" :row-key="getRowKeys">
......
</el-table>
在你点完确定后 调用此方法 比如是弹框 有个确定按钮 绑定的click事件为confirm 在methods里写confirm方法
confirm(){
this.dialogvisible=false //关闭弹框
this.$refs.multiTable.clearSelection() //清除选中的数据
}
更多推荐
所有评论(0)