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

小咪咪 2023-02-10 01:17 763阅读 0赞

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

[element-ui的table表格的多选框默认选中\_u010007013的博客-CSDN博客\_elementui表格多选默认勾选][element-ui_table_u010007013_-CSDN_elementui]

[vue项目中 elementUI 中表格多选框默认选中，但没有效果问题\_louting249的博客-CSDN博客][vue_ elementUI _louting249_-CSDN]

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

![在这里插入图片描述][1349fc110987b2ab2a9fa9cbb59e9f73.png]

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

[vue element-ui table _ -]: https://www.pianshen.com/article/87681323283/
[element-ui_table_u010007013_-CSDN_elementui]: https://blog.csdn.net/u010007013/article/details/97828405?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-2
[vue_ elementUI _louting249_-CSDN]: https://blog.csdn.net/louting249/article/details/104022350/
[1349fc110987b2ab2a9fa9cbb59e9f73.png]: https://img-blog.csdnimg.cn/img_convert/1349fc110987b2ab2a9fa9cbb59e9f73.png