updateKeyChildren不能局部更新树问题

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

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就可以更新,不会出现莫名其妙的父节点收起或者更新不全的问题

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值