el-table回顯預設勾選-彈窗

君子笑而不语發表於2024-10-22

要使用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 說明顯示被勾選
        })
      });

    },

相關文章