解决Element UI 表格组件懒加载数据刷新问题

一、问题描述

element ui的table组件设置成懒加载时,遇到数据表格需要更新、删除等操作,子节点不会自动更新。

二、解决思路

刷新数据,就是重新调用load(),通过map记录已展开的节点,需要刷新数据时,取出对应treeNode,调用load()进行数据刷新。

三、代码实现(VUE)

javascript 复制代码
export default {
	data() {
		return {
			map: new Map(),
		}
	},
	methods: {
		load(tree, treeNode, resolve) {
			let parentId = tree.id;
			listCustomerPackageConsumeChildren(parentId).then((response) => {
				// 在节点展示加载数据时记录treeNode节点
				this.map.set(parentId, {tree,treeNode,resolve});
				resolve(response.data);
			});
		},
		
		
		// 在新增、编辑、删除子节点时,通过父级id找到对应的treeNode,重新加载子节点列表,完成数据刷新
		refresh(parentId) {
			if(this.map.get(parentId)) {
				const {tree,treeNode,resolve} = this.map.get(parentId);
				if(tree) {
					this.load(tree, treeNode, resolve);
				}
			}
		},
		
		
		updateTable(){
			//.....to do....
			// 刷新表格懒加载数据
            this.refresh(你的id);
		}
		
		
	}
}
相关推荐
社恐的下水道蟑螂18 小时前
LangChain:AI 应用开发框架的深度解析与实践指南
前端·langchain·ai编程
凌览18 小时前
2025年,我和AI合伙开发了四款小工具
前端·javascript·后端
青莲84318 小时前
Java基础篇——第一部
android·前端
留简18 小时前
从零搭建一个现代化后台管理系统:基于 React 19 + Vite + Ant Design Pro 的最佳实践
前端·react.js
小满zs18 小时前
Next.js第十八章(静态导出SSG)
前端·next.js
CAN117718 小时前
快速还原设计稿之工作流集成方案
前端·人工智能
A242073493018 小时前
深入浅出JS事件:从基础原理到实战进阶全解析
开发语言·前端·javascript
疯狂踩坑人18 小时前
【Nodejs】Http异步编程从EventEmitter到AsyncIterator和Stream
前端·javascript·node.js
烧冻鸡翅QAQ18 小时前
从0开始的游戏编程——开发前的编程语言准备(JAVAScript)
开发语言·javascript·游戏
软弹18 小时前
Vue2 - Dep到底是什么?如何简单快速理解Dep组件
前端·javascript·vue.js