解决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 分钟前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda724 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH37 分钟前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390411 小时前
flutter 仿商场_首页
前端
少卿1 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>1 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
敲敲敲敲暴你脑袋1 小时前
Canvas绘制自定义流动路径
vue.js·typescript·canvas
JYeontu2 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_2 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放2 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app