在使用element-UI组件时,尤其是各种后台管理软件用到的尤其多。
在用table组件时,我结合了checkBox来进行多选,用来传递多组数组。
但是我在载入页面时使用过一次,用来显示已经勾选过的选项(从后端传的数据),然后用
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
来进行反选选项
handleSelectionChange(val) {
this.multipleSelection = val;
}
用这个来执行CheckBox被选中时操作,记录我所要的id,
此时我遇到一个问题,就是数据和方法都已经被执行,但是选项没有被勾选,我对两个方法都进行了排查,发现每次进行反选都会执行一次选中操作。但是反选只执行了2次,而选中操作执行了3次。我发现最后一次选中操作,会将已经选中的数据全部清空。
解决方案:
对反选操作进行延时执行,我才是每次加载table组件时CheckBox全部都会被置空,而反选操作延时执行则会避免这个问题
setTimeout(()=>{
this.meter_list.forEach(row => {
if (row.authState == '1'){
this.$refs.multipleTable.toggleRowSelection(row);
}
});
},1000)