vue组件懒加载 ajax,【Vue】elementui tree如何重新渲染指定节点及其子节点(懒加载方式)...

本文探讨了在Vue项目中使用ElementUI的Tree组件进行懒加载时,如何实现节点的动态更新。重点在于处理节点的展开、编辑、新建、删除等操作时,如何正确更新树结构。通过缓存resolve方法和使用$refs更新数据的方法被提出,但遇到了指向错误的问题。文章提到了一种解决方案,即通过`this.$refs.phototree.store.append`方法来更新节点,同时讨论了ElementUI Tree的`updateKeyChildren`方法在处理动态数据时的注意事项。
摘要由CSDN通过智能技术生成

问题描述

el-tree组件如何更新指点节点的数据和子节点数据,

问题出现的环境背景及自己尝试过哪些方法

0d4e3578b67f9d92f0462b3378fdf720.png

现象入上图

1、左侧树组件,右侧其他组件

2、左侧树采用异步加载,点击左侧的node,右侧会ajax请求数据并渲染,渲染的是点击node下面的文件夹及其他

3、右侧的文件夹双击是进入,对应左侧也要展开,右侧文件夹编辑可以修改文件夹名称,移动文件夹的路径,还有删除文件夹和新建文件夹的功能,需要左侧树结构也对应更新

相关代码,代码比较多,最后面有文字总结

树结构代码

:props="defaultProps"

:load="loadNodephoto"

lazy

v-if="phototreeshow"

@node-expand="expandHandle"

ref="phototree"

node-key="folderId"

:default-expanded-keys="defaultexpendphoto"

empty-text="数据为空"

:expand-on-click-nod

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值