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