element-ui中table組件的toggleRowSelection()方法


  最近,在做關於翻頁導出功能時,遇到需要將前面勾選過的選項進行回顯的情況,因為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則無效。具體原因還不是太清楚,但我想應該是因為兩個引用類型的地址不同引起的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM