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(); //操作完成清除勾選項