element-ui中table组件的toggleRowSelection（）方法

Posted 2020-12-18 wanqiblog

　　最近，在做关于翻页导出功能时，遇到需要将前面勾选过的选项进行回显的情况，因为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则无效。具体原因还不是太清楚，但我想应该是因为两个引用类型的地址不同引起的。