ElementUI表格多選框根據后端傳來的數據進行數據回顯


前端部分代碼:重要的是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; },

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM