这篇博客介绍了如何在Vue项目中，结合Element UI的Table组件实现数据多选和分页时保持选择状态。通过设置`row-key`，`reserve-selection`属性以及监听`handleSelectionChange`事件来保存选中数据。在data中定义`getRowKeys`方法用于获取唯一标识，并在`methods`中定义`handleSelectionChange`来更新选中数据。回显功能的关键在于使用`toggleRowSelection`方法，根据后台返回的与会人员ID遍历并设置表格选中状态。回显时需要注意执行时机，可以使用定时器延迟调用来避免问题。
业务的需要：我要对与会人员勾选，记录所选的与会人员，并且点击到别的页面上时也要记录所勾选的。第一次尝试，每次点击下一页数据都会清空。然后我就去element ui官网查看了api.实现如下：
在table一定要定义以下事件和列表属性：
1、row-key，
2、reserve-selection
handleSelectionChange这个事件的作用是我保存勾选数据的。
......
在data的return中定义：
getRowKeys(row) {
return row.id;
},
因为我数据库中有id这个字段，所以前台row里面有id作为唯一标识
因为使用了上面的表的属性，在配合下面的列属性：reserve-selection
type必须是selection。
因为要把勾选的数据传到后台所以在methods定义：
handleSelectionChange(val) {this.multipleSelection =val;//勾选放在multipleSelection数组中
},
想要数据自己在multipleSelection数组中拿。这时基本结束了，功能实现了。
再说下数据的回显：
先介绍下回显核心：
rowMultipleChecked() {if(this.addForm.mtParticipantsId != null){//这里我先判断从后台查的与会人员id的集合有没有 不然下面length属性会报错。for (let j = 0; j < this.addForm.mtParticipantsId.length; j++) {//这里我用到了双重for循环 this.pageUser这是所有人员信息for (let i = 0; i < this.pageUser.length; i++) {if (this.addForm.mtParticipantsId[j] == this.pageUser[i].id) {if(this.$refs.bkUserTable!=undefined){//解决下面用bkUserTable不报错 bkUserTable我是在table ref定义的this.$refs.bkUserTable.toggleRowSelection(this.pageUser[i], true);//这个就是回显的核心
}
}
}
}
}
},
另外这个方法不能直接调用，会有问题的，应该是执行顺序有关吧。在这里我用到了定时器：(打开弹框后在调用这个方法)
openbkPUser() {
this.getNodeByDeptUser();this.form_title = "与会人员信息";if (this.stateSave != "2") {this.dialogFormVisible3 = true;
setTimeout(()=>{this.rowMultipleChecked();
},500)
}
},
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
