ElementUI el-table树形表格懒加载如何手动刷新 el-table树状表格手动刷新的方法

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

我的环境是ElementPlus,按照相同原理,应该是可以在ElementUI中使用的,下面开始正文。

首先,先看一下ElementPlus的el-table组件的相关代码:

<el-table :data="xxxList" row-key="id" lazy :load="xxxLoad"
                @expand-change="xxxExpandChange">
    <!--   内容省略   -->
</el-table>

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

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

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

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

lazy代表使用懒加载。

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

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

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

一、首先在data()中需要声明一个变量tableTreeRefreshTool赋值为空对象即可。你可以把他理解为java中的Map。

tableTreeRefreshTool: {}

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

xxxLoad (tree, treeNode, resolve) {
    // 在之前声明的全局变量中,增加一个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事件,我这里名称为xxxExpandChange。

xxxExpandChange (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,到这里就实现了ElementPlus中el-table刷新树形表格数据的功能,各位读者如果有什么问题或不清楚的可以在评论区问我。

  • 18
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无枫丶

谢谢老板!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值