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

8次阅读

共计 1123 个字符，预计需要花费 3 分钟才能阅读完成。

有个需要是这样的：须要在 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
}