解决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);
		}
		
		
	}
}
相关推荐
编程之路从0到12 分钟前
JSI入门指南
前端·c++·react native
开始学java3 分钟前
别再写“一锅端”的 useEffect!聊聊 React 副作用的逻辑分离
前端
百度地图汽车版8 分钟前
【智图译站】基于异步时空图卷积网络的不规则交通预测
前端·后端
qq_124987075311 分钟前
基于Spring Boot的“味蕾探索”线上零食购物平台的设计与实现(源码+论文+部署+安装)
java·前端·数据库·spring boot·后端·小程序
用户658681803384012 分钟前
Vue3 项目编码规范:基于Composable的清晰架构实践
vue.js
编程之路从0到113 分钟前
React Native 之Android端 Bolts库
android·前端·react native
小酒星小杜13 分钟前
在AI时代,技术人应该每天都要花两小时来构建一个自身的构建系统 - Build 篇
前端·vue.js·架构
zengyufei15 分钟前
2.4 watch 监听变化
vue.js
奔跑的web.16 分钟前
TypeScript 全面详解:对象类型的语法规则
开发语言·前端·javascript·typescript·vue
江上月51320 分钟前
JMeter中级指南:从数据提取到断言校验全流程掌握
java·前端·数据库