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

问题

有个需要是这样的：须要在table中退出开展行的性能。

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

如下所示：

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

解决方案

看了element的文档，没找到解决方案。
前面联合expand-change事件，发现是能够解决的。

大略是load的时候，须要借助expand-change事件来再次触发load的执行。

代码如下所示：
html:

<el-table
    :data="dataList"
    v-loading="loading"
    class="table"
    row-key="prodInstId"
    lazy
    :load="load"
    :tree-props="{children:'children',hasChildren: 'hasChildren'}"
    @expand-change="handleExpandChange">

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
}

最初

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

有疑难和问题，请留言。

如果感觉文章还能够，请点赞或珍藏，谢谢。