updateKeyChildren不能局部更新树问题

文章讲述了在使用el-tree组件时遇到的问题,即updateKeyChildren方法无法正确局部更新树节点。问题出在未对目标节点的children进行深拷贝,导致更新失败。解决方案是先深拷贝children数组,然后进行操作,以确保与原始数据分离,从而正确更新树结构,避免父节点状态异常或更新不完整的情况。

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

el-tree的updateKeyChildren方法,调用后不能局部更新树问题,原因是,我写了以下的语句:

let targetChildrenNodes = targetParentNode.data.children || [];
if ((!targetParentNode.data.hasntChild && targetChildrenNodes && targetChildrenNodes.length > 0) || targetParentNode.data.hasntChild) {
        let index = targetChildrenNodes.filter(node => node.nodeId.indexOf('F') === 0).length;
        targetChildrenNodes.splice(index, 0, currentNode.data)
        setTimeout(() => {
          this.$refs.dataIntDevLeftTree.updateKeyChildren(nodeId, targetChildrenNodes);
        }, 20)
}

实际上第一句这里要改成:

let targetChildrenNodes = utils.objDeepCopy(targetParentNode.data.children || []);

把要更新的节点的children取出来之后要深拷贝一份出来,和原来的区分存储空间,这样updateKeyChildren就可以更新,不会出现莫名其妙的父节点收起或者更新不全的问题

el-tree的懒加载功能是通过`lazy`属性和`load`方法结合使用来实现的。在`el-tree`组件中,设置`lazy`属性为true表示启用懒加载功能,然后通过`load`方法加载子数据。 具体实现的步骤如下: 1. 在`el-tree`组件中设置`lazy`属性为true,即`lazy="true"`。 2. 创建一个方法,例如`loadNode`,作为加载子数据的方法。 3. 在`loadNode`方法中,根据节点的级别判断是一级节点还是子节点。 4. 如果是一级节点,直接将父级数据设置到`resolve`中,即`resolve(that.knowledgeDatas)`。 5. 如果是子节点,根据需要获取子节点的数据,可以通过异步请求等方式获取。 6. 获取到子节点的数据后,将数据格式化为需要的格式,并使用`updateKeyChildren`方法将数据设置给其父节点,即`that.$refs.tree.updateKeyChildren(node.data.id, resArr)`。 7. 最后,将获取到的子节点数据通过`resolve`传递出去,即`resolve(resArr)`。 通过以上步骤,就可以实现el-tree部分的懒加载功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Element-ui形控件el-tree自定义增删改和局部刷新及懒加载操作](https://download.youkuaiyun.com/download/weixin_38542223/13125838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [el-tree懒加载](https://blog.youkuaiyun.com/m0_57311133/article/details/123844869)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值