最近在使用Element的el-table表格组件时，发现一个问题，我的业务场景需要使用树形表格，并且使用懒加载的模式加载子级数据，但是使用Element自带的树形表格和懒加载功能，懒加载仅会在第一次展开时加载，后续会使用第一次缓存的数据，而不会重新加载，本篇文章提供了解决方案。
首先，先看一下Element的el-table组件的相关代码：
:data="tableData" row-key="id" lazy :load="loadData" @expand-change="handleExpandChange">
这些属性或事件都是Element自带的，是本文章需要用到的，使用ElementPlus的用户可能有所差异，自行根据官方文档替换即可。
data代表需要渲染的表格数据，我们使用树形菜单+懒加载的形式需要数据中包含children字段和hasChildren字段的，这两个字段可以通过prop配置，具体可以查看官方文档，我这里以默认字段举例。 其中hasChildren代表是否具有子节点，为了便于演示我这里的数据全为true，如果为false则不会有树形菜单的展开小箭头，也就不能触发load方法了。
row-key 在使用树形菜单+懒加载时必须指定且唯一，具体见官方文档。 lazy代表使用懒加载。 load需设置为触发懒加载的方法名。 expand-change为展开或关闭树形菜单时触发的事件。
ok，基本属性与方法介绍完毕，下面我们开始实现该功能。
一、首先在data()中需要声明一个变量tableTreeRefreshTool赋值为空对象即可。
currentParentId: null,
tableTreeRefreshTool: {}
二、接下来需要配置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)
})
}
其中重点就在于保存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
}
其中，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)
})
}
ok，到这里就实现了Element中el-table刷新树形表格数据的功能，各位读者如果有什么问题或不清楚的可以在评论区问我。
好文推荐
发表评论