this.$refs.multipleTable.toggleR
2021-03-17 本文已影响0人
Soup_1acc
element-ui 复选框表格
更新页面反选已选选项不显示
使用this.$nextTick将回调延迟到下次 DOM 更新循环之后执行
注意:这里通过从所有列表tableData中找到需要选中的项来帮助选中,直接使用选中列表来设置会出错
参考文章:https://blog.csdn.net/qingmuzhang/article/details/108195038
原方法:
// 将temptalelist传入toggleSelection()进行反向选择配套仪器(原方法)
let tempTableList = [];
for (var i = 0; i < this.allTableData.length; i++) {
this.equipmentInfo.associatedEquipment.forEach((item) => {
if (this.allTableData[i].equipmentNo === item) {
tempTableList.push(this.allTableData[i]);
}
});
}
this.toggleSelection(tempTableList);
// 反向选中已有配套设备 回显数据
toggleSelection(rows) {
if (rows) {
this.$nextTick(() => {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row, true);
});
});
} else {
this.$refs.multipleTable.clearSelection();
}
}
最终代码:
this.$nextTick(() => {
this.equipmentInfo.associatedEquipment.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(
this.allTableData.find((item) => {
return row == item.equipmentNo
}),
true
)
})
})