解决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);
		}
		
		
	}
}
相关推荐
零度晚风2 分钟前
React 底层原理 & 新特性
前端
用户61848240219513 分钟前
我受够了 Electron 的 IPC 样板代码,于是写了 electron-ipc-auto-import
前端
梦想的颜色18 分钟前
TypeScript 完全指南(中):函数、接口、类与高级类型
前端·typescript
鹏多多19 分钟前
OpenSpec+SDD规范驱动AI Agent开发项目实战指南
前端·vue.js·react.js
叶小树咯26 分钟前
React 为什么不能像 Vue 那样 state.count++
前端·react.js
ricardo197331 分钟前
防抖节流进阶 + requestAnimationFrame:滚动与输入场景的性能优化
前端·面试
wjj不想说话31 分钟前
你项目里的 Pinia,可能已经成了第二个 localStorage
前端·vue.js
wuhen_n38 分钟前
LangChain JS 入门:快速搭建前端 AI 开发环境
前端·langchain·ai编程
天蓝色的鱼鱼1 小时前
画1万个图形就卡成PPT?试试这款国产高性能2D引擎
前端·javascript
wuxia21181 小时前
用Node.js为网站首页绑定数据
javascript·node.js