Vue element-ui的table表格的多选框默认选中

林中明月间。

已于 2023-03-31 15:52:40 修改

阅读量6.7k

点赞数 2

分类专栏： Vue.js 文章标签： javascript

于 2020-05-19 16:29:25 首次发布

原文链接：https://blog.csdn.net/u010007013/article/details/97828405?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-2

版权

Vue.js 专栏收录该内容

195 篇文章 21 订阅

订阅专栏

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();
      }
    },