vue element-ui table 表格默认选中 - 程序员大本营

element table默认全选,可选择全不选 - 简书

element-ui的table表格的多选框默认选中_u010007013的博客-CSDN博客_elementui表格多选默认勾选

vue项目中 elementUI 中表格多选框默认选中,但没有效果问题_louting249的博客-CSDN博客

 

https://www.baidu.com/link?url=qpUVmHeOp2mTn_CR3ROv5sfaNkC-TwJGdrgIfYG6D6cA1EBLaMGvx4LcF7YYsG8RRfeBJoMeaaEwjpK4nvXvo_&wd=&eqid=b87a19a800017b7d00000004642687ae

element-ui table使用type='selection'复选框全禁用(全选禁用)详解(针对全选按钮框)

场景分析:
进入页面编辑表格的时候,表格的多选框后台记住勾选的处于默认选中状态。
解决办法:
可以在后台返回数据之后调用table的toggleRowSelection方法来实现默认勾选
代码如下:

在这里插入图片描述

data(){
  return{
    tableData:[],//当前的table的数据
    hasSelectList:[],//已经选择的id组成的数组
  }
}
<el-table ref="dataTable">

//默认选中的数据
checkFn() {
      const _this = this;
      _this.$nextTick(() => {
        _this.tableData.forEach((row, i) => {
          _this.hasSelectList.forEach((selectrow, j) => {
            if (
              _this.tableData[i].equipmentCode ===
              _this.hasSelectList[j].equipmentCode
            ) {
              _this.$refs.dataTable.toggleRowSelection(row, true);
              //_this.$refs.dataTable.toggleRowSelection(_this.tableData[i], true);
            }
          });
        });
      });
    },


toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.dataTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.dataTable.clearSelection();
      }
    },

Logo

前往低代码交流专区

更多推荐