技術標籤：vueelementui前端

工作中常常遇到從後端獲取資料渲染到表格中，但如何實現表格回顯勾選資料的呢？以下我會結合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);   //回顯打勾
            }
          }
        });
      });
    }
}