場景

在其他地方設置好人員，到對應的頁面直接在表格中復選設置好的人員。解決方案用到selection-change方法

<el-button @click="EchoClick()">回顯設置好的人</el-button>
<el-table ref="choeck" :data="TableData" @selection-change="SelectionChange" id="noAllTable"><el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>
// 注意：choeck、SelectionChange、noAllTable三個參數

實現

EchoClick() {let SetChooseList = [{phone:'176****1486', name:''}, {phone:'138****2366', name:''}, {phone:'131****2589', name:''}, {phone:'177****8118', name:''}];this.$nextTick(() => {this.TableData.forEach((row) => {for (let index = 0; index < SetChooseList.length; index++) {let T = SetChooseList[index].phone == row.phone;// 默認設置好的人員在TableData中是否存在if (T == true) {//  存在，復選框自動回顯this.$nextTick(() =>{this.$refs.choeck.toggleRowSelection(row, true);})// 走完這步，完成一個數據回顯}}});});
}

到這里基本完成了回顯功能。

追加需求

限制選中人員上限，大家可能會想到直接判斷選中的list，實際操作中存在一個問題：你選擇了，給了提示，表格顯示上還是會選中。解決該問題，用到toggleRowSelection函數

SelectionChange(val){if(val.length < 10){// 來判斷是否滿足上限條件this.selist = val;}else{this.$message.error('最多選擇9人');this.$refs.choeck.toggleRowSelection(val.pop());//  滿足條件后，消除最后一次選擇的數據}
}

發現問題優化

表格中選中的人員，點擊取消后，再次進來人員還在，部分可能覺得正常，實際是不對（切換了數據綁定對象，還存在是不對的）。這里筆者做了一個點擊取消就默認為當前選擇的取消（不要了）。解決方案用到clearSelection函數

// 在賦值或回顯之前，通過clearSelection函數來清除前面賦值數據。直接重新賦值是可以的，賦值數據不同時，是出現問題
this.$nextTick(() => {this.$refs.choeck.clearSelection();
});

以上是筆者在工作中，遇到的問題，希望能給大家帶來幫助！！