ElementUI el-table树形表格懒加载手动刷新 解决Element Table组件树形展示懒加载数据更新的问题_element-plus的树组件异步加载想要手动执行这个加载数据的load方法

最近在使用Element的el-table表格组件时，发现一个问题，我的业务场景需要使用树形表格，并且使用懒加载的模式加载子级数据，但是使用Element自带的树形表格和懒加载功能，懒加载仅会在第一次展开时加载，后续会使用第一次缓存的数据，而不会重新加载，本篇文章提供了解决方案。

首先，先看一下Element的el-table组件的相关代码：

<el-table 
	:data="tableData" 
	row-key="id" 
	lazy 
	:load="loadData"
    @expand-change="handleExpandChange">
    <!--   内容省略   -->
</el-table>
1
2
3
4
5
6
7
8

这些属性或事件都是Element自带的，是本文章需要用到的，使用ElementPlus的用户可能有所差异，自行根据官方文档替换即可。

• data代表需要渲染的表格数据，我们使用树形菜单+懒加载的形式需要数据中包含children字段和hasChildren字段的，这两个字段可以通过prop配置，具体可以查看官方文档，我这里以默认字段举例。

   其中hasChildren代表是否具有子节点，为了便于演示我这里的数据全为true，如果为false则不会有树形菜单的展开小箭头，也就不能触发load方法了。
  1

• row-key 在使用树形菜单+懒加载时必须指定且唯一，具体见官方文档。

• lazy代表使用懒加载。

• load需设置为触发懒加载的方法名。

• expand-change为展开或关闭树形菜单时触发的事件。

ok，基本属性与方法介绍完毕，下面我们开始实现该功能。

一、首先在data()中需要声明一个变量tableTreeRefreshTool赋值为空对象即可。

currentParentId: null,
tableTreeRefreshTool: {}
1
2

二、接下来需要配置el-table组件的:load方法，我这里举例为loadData。

loadData (tree, treeNode, resolve) {
	// 保存父级id，在你需要刷新子级数据的地方可以用到
	this.currentParentId = row.id
    // 在之前声明的全局变量中，增加一个key为 本条数据的id，id可替换为你数据中的任意唯一值
    this.tableTreeRefreshTool[tree.id] = {}
    // 重要！保存resolve方法，以便后续使用
    this.tableTreeRefreshTool[tree.id].resolve = resolve
    // 记录展开次数，具体作用后续介绍
    this.tableTreeRefreshTool[tree.id].expandCount = 0
    // 请求api接口获取数据
    this.$http.get(`你的api接口`).then(({ data: res }) => {
        // 调用resolve方法，渲染子级数据
        resolve(res.data.children)
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

其中重点就在于保存resolve方法，以便于后续使用，当然你也可以使用其他的方式保存该方法也是可以的，这里只提供了我的解决方案，你可以根据你的业务场景或项目环境来自行实现。

三、接下来需要设置el-table组件的expand-change事件，我这里名称为handleExpandChange。

handleExpandChange (row, expanded) {
    // 获取到之前保存的全局变量
    const curr = this.tableTreeRefreshTool[row.id]
    // 展开次数 +1
    curr.expandCount++
    // 如果是展开状态，且展开次数大于1，且上一次的状态为折叠，则请求api数据，更新子菜单
    if (expanded && curr.expandCount > 1 && !curr.prevStatus) {
        // api请求
        this.$http.get(`你的api接口`).then(({ data: res }) => {
            // 调用之前存储的resolve方法
            curr.resolve(res.data.children)
        })
    }
    // 保存本次的展开或折叠状态，用于下次判断
    curr.prevStatus = expanded
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

其中，expandCount代表展开次数，这里是为了防止第一次展开时已经被lazyload加载过了，这里再次重复加载导致冲突。

使用prevStatus是因为调用resolve方法后，会再次触发这个expand-change方法，如果不进行判断，会导致死循环。

到此，基本功能就已经实现了，可以在每次展开时重新加载数据。

如果要在其他地方刷新数据，请继续看下文。

在你需要刷新子级数据的地方使用如下代码：

const curr = this.tableTreeRefreshTool[需要更新数据的父级数据id]
if (curr) {
    this.$http.get(`你的api接口`).then(({ data: res }) => {
        // 调用保存的resolve方法
        curr.resolve(res.data.children)
    })
}
1
2
3
4
5
6
7

ok，到这里就实现了Element中el-table刷新树形表格数据的功能，各位读者如果有什么问题或不清楚的可以在评论区问我。