美文网首页
this.$refs.multipleTable.toggleR

this.$refs.multipleTable.toggleR

作者: Soup_1acc | 来源:发表于2021-03-17 11:11 被阅读0次

    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.toggleR

          本文链接:https://www.haomeiwen.com/subject/hsbscltx.html