解决element ui的table懒加载只执行一次的问题

问题

有个需求是这样的:需要在table中加入展开行的功能。
解决element ui的table懒加载只执行一次的问题_第1张图片

看到element文档上可通过type="expand"实现,但例子只是form表单(“展开行”的例子)。
后面看到有table的例子(“树形数据与懒加载”),可通过设置lazy属性和load函数来实现。

如下所示:
解决element ui的table懒加载只执行一次的问题_第2张图片

但整合到项目中,发现load只执行了一次。也就是第二次点击小箭头,是不会发请求的。
这样就会有点问题,因为如果在别的页面更改了展开行的数据,那只能通过刷新页面来更新当前展开行的数据。

解决方案

看了element的文档,没找到解决方案。
后面结合expand-change事件,发现是可以解决的。

大概是load的时候,需要借助expand-change事件来再次触发load的执行。

代码如下所示:
html:

JS:


handleExpandChange(row, expanded) {
  if (expanded) { // 当前是展开状态
    if (this.hasLoad) { // 已执行过load,则去掉执行过的标记
      this.hasLoad = false
    } else { // 不然,则执行load。因为load只会执行一次,所以需要在expand事件触发再次执行
      this.load(this.currentLoadTreeData, '', this.resolveObj)
    }
  }
},
async load(tree, treeNode, resolve) {
  // 标记当前已执行load
  this.hasLoad = true
  this.currentLoadTreeData = tree
  // 缓存当前的resolve
  this.resolveObj = resolve
  await this.getReadOnlyDetail(tree, resolve)
},
async getReadOnlyDetail(row, resolve) {
  const params = {
    prodInstId: row.prodInstId,
    isOnlyReadInst: true
  }
  const res = await http.detail(params)
  resolve([res.data])
  return res
}

最后

  • 公众号《毛毛虫的小小蜡笔》

有疑问和问题,请留言。

如果觉得文章还可以,请点赞或收藏,谢谢。

你可能感兴趣的:(element-ui)