解决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);
		}
		
		
	}
}
相关推荐
妖萌妹儿23 分钟前
postman怎么做参数化批量测试,测试不同输入组合
开发语言·javascript·postman
阿琳a_26 分钟前
在github上部署个人的vitepress文档网站
前端·vue.js·github·网站搭建·cesium
酉鬼女又兒26 分钟前
零基础快速入门前端ES6 核心特性详解与蓝桥杯 Web 考点实践(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·职场和发展·蓝桥杯·es6·css3·html5
Zk.Sun38 分钟前
【RK3588 Mali610 适配 Qt6 】
前端·javascript·vue.js
不想吃菠萝42 分钟前
vue3+ts 使用postcss-pxtorem依赖进行rem适配
前端·javascript·vue.js·postcss
人民广场吃泡面1 小时前
React新手快速入门学习指南(2026最新版)
前端·react.js·前端框架
kyriewen111 小时前
本地存储全家桶:从localStorage到IndexedDB,把数据塞进用户浏览器
开发语言·前端·javascript·ecmascript·html5
油丶酸萝卜别吃1 小时前
本地调试跨域问题:关闭 Chrome 同源策略的技巧
前端·chrome
Rysxt_1 小时前
Vue 组件穿透(透传)完全指南:从背景到实战
前端·javascript·vue.js
浮尘笔记1 小时前
从零开始:Android环境搭建与WebView套壳应用
android·前端·android studio·安卓