element-ui 表格如何回显打勾

工作中常常遇到从后端获取数据渲染到表格中，但如何实现表格回显勾选数据的呢？以下我会结合vue.js框架讲述我的实现过程。

后端获取数据渲染后，效果如下图所示：

表格渲染代码如下：

<template>
 <div>
   <el-row>
     <el-col>
         <el-table
              ref="multipleGateTable"
              :data="tableGateData"
              border
              @select="selectChange"
              @select-all="selectGateAll"
            >
              <el-table-column type="selection" width="55" align="center"></el-table-column>
              <el-table-column prop="optionTag"  align="center" label="代码"></el-table-column>
              <el-table-column prop="optionName"  align="center" label="飞行任务"></el-table-column>
         </el-table>
       </el-col>
     </el-row>
  </div>
</template>

表格中select事件：当用户手动勾选数据行的Chenckbox时触发的事件,有两个参数selection,row

表格中select-all事件：当用户手动勾选全选Chenckbox时触发的事件,有一个参数selection。

回显需要的方法 

勾选使用方法：toggleRowSelection(row,selected)，toggleRowSelection的第一个参数是选中的行数，第二个参数是否选中，true代表选中，false代表未选中。调用toggleRowSelection这个方法， 需要获取真实dom 所以需要注册 ref 来引用它 。

清除勾选方法：clearSelection(),清除勾选的行数，需要获取真实dom 所以需要注册 ref 来引用它

this.$nextTick()方法:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，使页面渲染和获取的数据保持一致。

具体实现回显逻辑代码如下所示：

data(){
  return(){
     tableGateData:[],
  }
}
methods:{
  getGate() {
      getOptionConfig({          //向后端发送请求
        optionTopic: "gate_task"
      }).then(res => {
        this.tableGateData = res.data;
        this.$nextTick(() => {     
          this.$refs.multipleGateTable.clearSelection();  //清除上一次的回显，不然修改后提交显示的页面和数据不一致
          for (let i = 0; i < this.tableGateData.length; i++) {
            if (
              this.tableGateData[i].check == true
            ) {
              this.$refs.multipleGateTable.toggleRowSelection(
                this.tableGateData[i],true);   //回显打勾
            }
          }
        });
      });
    }
}