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

在实际业务场景中,一个页面包含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()         展开并加载该节点的子节点

你可能感兴趣的:(前端,javascript,vue3,element,plus)