elementui dialog中el-table多選table修改時設置選中項

el-table默認選中項
核心僞代碼如下:

this.$refs.multipleTable.toggleRowSelection(this.tableData[index],true);   //row 選中

外面套兩層for循環,if判斷想要選中的某項值和tableData中某對象的某個值相等即可

for(var i=0; i<GuidList.length; i++){
   for (let index = 0; index < this.tableData.length; index++) {
       if (GuidList[i] == this.tableData[index].staffId) {                      //服務端返回需選中項的id
           this.$refs.multipleTable.toggleRowSelection(this.tableData[index], true);    //row.ndex 選中
       }
   }
 }

當然前提是必須要現生成table列表,然後獲取到修改項,包括選中項,重要的一點是必須把拿到的數據賦值給data中雙向綁定的數據:
問題來了,我設置好之後,數據時拿到了,設置也設置了,但是view視圖時而能更新,時而不能更新,仔細排查了一遍,原因是因爲dialog彈出來了但是其中的table還未被實例化,不能被操作,只需要將數據延遲一下渲染ok了,如下:

var setData = () => {
   for(var i=0; i<GuidList.length; i++){
        for (let index = 0; index < this.tableData.length; index++) {
            if (GuidList[i] == this.tableData[index].staffId) {
                this.$refs.multipleTable.toggleRowSelection(this.tableData[index], true); //row 選中
            }
        }
    }
    
    this.FormData = {    }     //更改data中的數據
}

if (!this.$refs.multipleTable) {
    setTimeout(() => {
        setData()
    }, 200)
} else {
    setData()
}

okay,當然被忘了給table添加ref的屬性。
提交完畢清空選中項:

this.$refs.multipleTable.clearSelection();            //操作完成清除勾選項
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章