element-UI中table組件使用時結合CheckBox

在使用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)
發佈了15 篇原創文章 · 獲贊 29 · 訪問量 4319
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章