this.$refs.multipleTable.toggleRowSelection复选框不渲染 修复bug

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
    )
  })
})

你可能感兴趣的:(this.$refs.multipleTable.toggleRowSelection复选框不渲染 修复bug)