关于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}

最初

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

有疑难和问题，请留言。

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