ElementUI表格多选框根据后端传来的数据进行数据回显

Posted 2021-03-21 pzw23

前端部分代码：重要的是ref="multipleTable"和this.$refs.multipleTable.toggleRowSelection(需要勾选的行数据，是否勾选）

<el-table
        :data="items"     //这个items是我定义的数据，用于接收后端传来的表格数据（items里面包含多个对象数据），表格遍历显示
        :row-key="getRowKey"   //多选框时是必要的
        @selection-change="selectAjgl"  //勾选和取消勾选都会触发这个selectAjgl函数
        ref="multipleTable"  //可以用来做数据回显打勾！！！
      >
        <el-table-column type="selection" :reserve-selection="true" /> //多选框需有一列表格类型为selection,reserve-selection="true"表示翻页了选项保留

onOldAjglId() {
      httpGet(`/iron/rwgl/selectAjgl/?id=${this.$route.params.id}`)
        .then(rst => {//查询后端得到以前被选的数据，我后端返回的是数据id集合
         this.oldAjglId = rst;
          if (rst.length > 0) {
            for (var i = 0; i < rst.length; i++) {
              for (var j = 0; j < this.items.length; j++) {
                if (this.oldAjglId[i] === this.items[j].id) {//items里面包含有的都回显打勾
                 this.$refs.multipleTable.toggleRowSelection(//回显打勾核心，toggleRowSelection的第一个参数是需要打勾的那一行数据，第二个参数表示是否选中，传true
                   this.items[j],
                    true
                  );
                }
              }
            }
          }
          this.ondamx(rst);
        })
        .catch(e => this.$message.error(e.message));
    },
getRowKey(row) {
      return row.id;
    },