解决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);
		}
		
		
	}
}
相关推荐
前端那点事9 分钟前
Vue路由跳转全场景实战(Vue2+Vue3适配)| 新手必看
vue.js
是席木木啊12 分钟前
告别console.log!Vue3项目日志框架选型指南
前端·vue3·日志框架
凰轮13 分钟前
TypeScript 知识点总结
前端·javascript·typescript
Hello--_--World21 分钟前
JS:闭包、函数柯里化、工厂函数、偏函数、立即执行函数 相关知识点与面试题
开发语言·javascript·ecmascript
英俊潇洒美少年22 分钟前
告别大请求卡顿!原生 CompressionStream 实现 axios 请求体自动 Gzip 压缩(前后端全适配)
前端
|晴 天|30 分钟前
Element Plus 组件库实战技巧与踩坑记录
前端·javascript·vue.js·typescript
im_AMBER42 分钟前
从面试题看JS变量提升
开发语言·前端·javascript·前端框架
Mintopia1 小时前
不用学微服务,也能设计不崩的系统:最小可行思路
前端
llf_cloud1 小时前
Vue2 项目中的全局自动弹窗队列设计
前端·javascript·vue.js
百锦再1 小时前
使用JavaScript获取和解析页面内容的完整指南
开发语言·前端·javascript·python·flask·fastapi