在使用element-UI組件時,尤其是各種後臺管理軟件用到的尤其多。
在用table組件時,我結合了checkBox來進行多選,用來傳遞多組數組。
但是我在載入頁面時使用過一次,用來顯示已經勾選過的選項(從後端傳的數據),然後用
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
來進行反選選項
handleSelectionChange(val) {
this.multipleSelection = val;
}
用這個來執行CheckBox被選中時操作,記錄我所要的id,
此時我遇到一個問題,就是數據和方法都已經被執行,但是選項沒有被勾選,我對兩個方法都進行了排查,發現每次進行反選都會執行一次選中操作。但是反選只執行了2次,而選中操作執行了3次。我發現最後一次選中操作,會將已經選中的數據全部清空。
解決方案:
對反選操作進行延時執行,我纔是每次加載table組件時CheckBox全部都會被置空,而反選操作延時執行則會避免這個問題
setTimeout(()=>{
this.meter_list.forEach(row => {
if (row.authState == '1'){
this.$refs.multipleTable.toggleRowSelection(row);
}
});
},1000)