最近在使用Element的el-table表格组件时,发现一个问题,我的业务场景需要使用树形表格,并且使用懒加载的模式加载子级数据,但是使用Element自带的树形表格和懒加载功能,懒加载仅会在第一次展开时加载,后续会使用第一次缓存的数据,而不会重新加载,本篇文章提供了解决方案。
首先,先看一下Element的el-table组件的相关代码:
<el-table
:data="tableData"
row-key="id"
lazy
:load="loadData"
@expand-change="handleExpandChange">
<!-- 内容省略 -->
</el-table>
这些属性或事件都是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刷新树形表格数据的功能,各位读者如果有什么问题或不清楚的可以在评论区问我。