el-table回显默认勾选-弹窗

要使用nextTick()方法+element表格中的toggleRowSelection()方法

记得在table标签中添加ref

 

<el-table :data="list" ref="multipleTableRef">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
      </el-table>

 

 

vue代码:

queryBadgeToSet(query) {
      var self = this;
      this.$http.post(API_ROOT.tjk + '/query', this.searchData).then(response => {
        var result = response.data;
        if(result.success) {
          self.dialogBadgeSet.badgeList = result.data;//拿到数据,准备开始渲染

          // 等待tableData.value被赋值,DOM更新后再设置默认勾选
           self.toggleSelection(self.dialogBadgeSet.badgeList);
        }else {
          this.$alert(result.msg)
        }
      }, response => {
        this.$alert('网络繁忙,请稍后重试!')
      })
    },
    toggleSelection(rows){
      var self = this;
      self.$nextTick(() => {
        rows.forEach((k,i)=>{
          var checkedOrNot = k.tjkBadgeId != null;
          self.$refs.multipleTableRef.toggleRowSelection(k, checkedOrNot);  //true 说明显示被勾选
        })
      });

    },

 

posted @ 2024-10-22 16:22  君子笑而不语  阅读(130)  评论(0编辑  收藏  举报