解决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);
		}
		
		
	}
}
相关推荐
摘星编程21 小时前
React Native for OpenHarmony 实战:Permissions 权限管理详解
javascript·react native·react.js
闲蛋小超人笑嘻嘻21 小时前
Vue 插槽:从基础到进阶
前端·javascript·vue.js
摘星编程21 小时前
React Native for OpenHarmony 实战:SearchBar 搜索栏详解
javascript·react native·react.js
梦65021 小时前
Vue2 与 Vue3 对比 + 核心差异
前端·vue.js
tiandyoin1 天前
给 MHTML 添加滚动条.mhtml
前端·chrome·html·mhtml
遗憾随她而去.1 天前
前端大文件上传(切片并发/断点续传/秒传/WebWorker 计算Hash) 含完整代码
前端
风叶悠然1 天前
vue3中pinia的数据持久化
vue.js
AKA__老方丈1 天前
vue-cropper图片裁剪、旋转、缩放、实时预览
前端·vue.js
梦6501 天前
Vue 单页面应用 (SPA) 与 多页面应用 (MPA) 对比
前端·javascript·vue.js
清铎1 天前
大模型训练_week3_day15_Llama概念_《穷途末路》
前端·javascript·人工智能·深度学习·自然语言处理·easyui