当前位置:   article > 正文

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

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刷新树形表格数据的功能,各位读者如果有什么问题或不清楚的可以在评论区问我。

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号