最近,在做關於翻頁導出功能時,遇到需要將前面勾選過的選項進行回顯的情況,因為table組件在每次翻頁的時候,都會清空上一頁勾選的選項,在切換回前一頁時,勾選過的選項不會保存。因此需要借助toggleRowSelection()方法設置勾選項。
toggleRowSelection()需要頁面渲染完畢之后才有效,因此需要放在this.$nextTick中,如果只有一頁數據,這樣就可以了,但是在有多頁數據的情況下,每次翻頁就會請求數據,進行數據更新,因此this.$nextTick需要放在updated回調中,等數據更新和頁面渲染都完成時,才有效。如下所示。
updated() {
this.$nextTick(() => {
this.tableData.forEach(outerItem => {
this.selectRows[this.page.current - 1] && this.selectRows[this.page.current - 1].forEach(item => {
if(outerItem.d == item.d) {
this.$refs.caseTable.toggleRowSelection(outerItem,true);
}
})
})
})
}
還有一個問題,如上所示,tableData中是傳入到table組件中的數據,而selectRows是我保存的勾選的數據,按理說數據的格式完全一樣,但是我向toggleRowSelection傳遞參數時,只能傳遞outerItem,也就是傳入table組件的數據,傳入item則無效。具體原因還不是太清楚,但我想應該是因為兩個引用類型的地址不同引起的。
