关于两个tree数据,如何根据id进行匹配替换一个tree中children的数据

1、根据树tree的key获取对应的树的节点item

export const findTreeItem = (tree = [], keys= '') => {
  for (const item of tree) {
    if (item.dataIndex == keys) {
      return item
    } else {
      if (item.children && item.children.length) {
        const treeItem = this.findTreeItem(item.children, keys)
        if (treeItem) {
          return treeItem
        }
      }
    }
  }
}

2、树数据匹配, B的children对象值覆盖A的children对象值

export const handleTreeMatch = (treeA = [], treeB = []) => {
	const updateList = treeA.map(item => {
		const updateChildren = item.children.map(child => {
	    	let treeBItem = this.findTreeItem(treeB, child.key)
	    	return { ...child, ...treeBItem}
	  })
	  return { ...item, children: updateChildren }
	})
	return updateList
},

3、使用

this.treeA = this.handleTreeMatch (treeA, treeB)
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
假设您的两个树形数据结构如下: ```javascript const tree1 = [{ id: '1', label: 'Node 1', children: [{ id: '2', label: 'Node 1-1', children: [] }] }]; const tree2 = [{ id: '2', label: 'Node 2', children: [] }]; ``` 您可以使用递归的方式将这两个树形数据根据id合并为一个新的树形结构,并返回一个新的树形数据。以下是一个示例代码: ```javascript function mergeTrees(tree1, tree2) { const newTree = []; // 新的树形数据 // 遍历tree1的每个节点,将其添加到newTree for (let i = 0; i < tree1.length; i++) { const node = tree1[i]; // 在tree2查找与当前节点id相同的节点 const sameNode = tree2.find(item => item.id === node.id); if (sameNode) { // 如果在tree2找到了同id的节点,将其子节点合并 newTree.push({ ...node, ...sameNode, children: mergeTrees(node.children, sameNode.children) }); } else { // 否则直接将节点添加到newTree newTree.push(node); } } // 将tree2剩余的节点添加到newTree for (let i = 0; i < tree2.length; i++) { const node = tree2[i]; const sameNode = newTree.find(item => item.id === node.id); if (!sameNode) { newTree.push(node); } } return newTree; } const newTree = mergeTrees(tree1, tree2); console.log(newTree); ``` 上述代码,`mergeTrees`函数接收两个参数,分别是要合并的两个树形数据。函数首先遍历`tree1`的每个节点,然后在`tree2`查找与当前节点id相同的节点。如果在`tree2`找到了同id的节点,将其子节点合并;否则直接将节点添加到新的树形数据`newTree`。接着,将`tree2`剩余的节点添加到`newTree`。最终,函数返回新的树形数据`newTree`。 希望这个示例代码能够帮助到您。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值