根据元素ID遍历树形结构，查找到所有父元素ID。

最新推荐文章于 2025-06-12 14:20:12 发布

原创最新推荐文章于 2025-06-12 14:20:12 发布 · 1.4w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#树结构 #ivew #级联选择

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在级联选择组件中，根据单一元素ID遍历树形结构，查找并收集所有父元素ID，通过递归算法实现，适用于前后端数据同步场景。

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

iveiw Cascader 级联选择组件 v-model的数据是一个数组类型，工作中如果需要回显的话，就需要传递所有父级元素的ID所组成的数组，但是后台只存放了目标元素的ID，所以只能自己去遍历数据获取了。
综上所述，需求确定了，就是：根据元素ID遍历树形结构，查找到所有父元素ID。
####下面是数据结构：

[{
    "orgId": 1,
    "orgName": "校长办公室1",
    "parentId": 0,
    "children": [{
        "orgId": 2,
        "orgName": "校长办公室2",
        "parentId": 1,
        "children": [{
            "orgId": 3,
            "orgName": "校长办公室3",
            "parentId": 2,
        }]
    }]
}]

个人思路是，用递归查找到ID的所属元素，然后把每一级的parentId一起返回。

####实现方法：

 function buildParentList(arr){
	arr.forEach(g =>
	 {
		if(g.parentId != undefined) {
			let pid = g['parentId']
           	let oid = g['orgId']
            parentList[oid] = pid	
		}
		if (g.children != undefined)
            buildParentList(g['children'])
	})
}
function findParent(idx){
    if (parentList[idx] != undefined){
        let pid = parentList[idx]
        console.log(pid)
        findParent(pid)
	}
}

####执行方法：

buildParentList(list)
findParent(3); // 0 1 2
findParent(2); // 0 1
findParent(4); // undefined

如有不足之处或者更好的方法欢迎指出！