element plus tree组件异步加载时，局部节点更新

最新推荐文章于 2025-03-17 17:58:34 发布

三笑咖啡

最新推荐文章于 2025-03-17 17:58:34 发布

阅读量1.3k

点赞数 1

文章标签：前端 javascript vue3 element plus

本文链接：https://blog.youkuaiyun.com/lanfeng330/article/details/129845140

版权

在业务场景中，当tree组件和form组件联动时，选中tree节点后form显示详情，而更新form数据需同步到tree。由于tree使用异步加载，不能直接更新数据。一种解决方法是通过改变节点的loaded属性为false并调用expand()来触发重新加载。对于根节点和普通节点，分别设置loaded和展开操作来实现局部刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际业务场景中，一个页面包含tree组件，form组件，两者是有联动的。如在tree中选择一个节点，form组件里就显示该节点的明细数据。现在的需求是，在form组件中更新了数据，如何通知tree进行更新？由于tree是异步加载节点的。所以不能通过更改tree的:data数据。参考了网上的做法（element uI ElementUI tree 异步树(懒加载)节点局部刷新 - 简书）

而我用的是element plus 方法有些差异，具体如下：

let rootNode=null  
	
	const loadSysTree=(node,resolve)=>{   //tree的异步加载方法，:load=xxx
		//console.log(resolve)
		if(node.level == 0){  //表示树的根节点，存储起来后面用
			rootNode=node
		}
        ......



   const systreeref=ref(null)  //tree组件实例的引用

   //如果是根节点更新

   rootNode.loaded=false
   rootNode.expand()


   //如果是普通节点

   let pNode=systreeref.value.getNode(nodeId)
   pNode.loaded=false
   pNode.expand()

   //以上并不是完整可运行代码，只列出了关键部分  
   //  node.loaded=false    标记为还未加载数据
   //  node.expand()         展开并加载该节点的子节点