码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-07-23 23:18:54      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:翻页   页面   问题   方法   ctr   date   保存   就是   java   

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

 

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

标签:翻页   页面   问题   方法   ctr   date   保存   就是   java   

原文地址:https://www.cnblogs.com/wanqiblog/p/13368645.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!