最近用 element-ui 的 Cascader级联选择器时遇到这样的需求,通常后端只会返回被选择的节点id,而页面上需要显示全路径,则需要给组件绑定包含全路径的数组。在这分享一下示例。
const tree = [
{
label: "菜",
value: "a56cf06fe27448a09acc781ad20e5d09",
children: [
{
label: "白菜",
value: "cd34d9ce36f34d359c2ca6913edbf904",
},
{
label: "青菜",
value: "08155ffefd8b4d30ad907e3e81a32875",
},
],
},
{
label: "肉",
value: "8ec5c4b34a094fbb9d3d73fd34f83e8c",
children: [
{
label: "鸡肉",
value: "2ea02fe2251a4423b08fed1919b52e39",
},
{
label: "猪肉",
value: "9c6adb4c9ccb445f911841376b159efa",
children: [
{
label: "猪头肉",
value: "e9bfbc80408a4bc18081c284737fc370",
},
{
label: "五花肉",
value: "1dc11d6908a1420b8daefd95595f4923",
},
],
},
],
},
{
label: "鱼",
value: "bfd22fa3a6f24a0e9bd61d95800443d7",
children: [
{
label: "草鱼",
value: "f57acdaa85fb42079c4843be8e52a299",
},
{
label: "带鱼",
value: "ea37df82bbaa4f258608787a14fc4452",
},
],
},
];
const id = "e9bfbc80408a4bc18081c284737fc370";
function findId(tree, id) {
const result = [];
const ff = (list) => {
for (let i = 0; i < list.length; i++) {
const ele = list[i];
// console.log("元素", ele.label);
if (ele.value === id) {
result.push(ele.label);
// result.push(ele.value);
return true;
} else {
if ("children" in ele) {
result.push(ele.label);
// result.push(ele.value);
if (ff(ele.children) === true) {
return true;
} else {
result.pop();
}
}
}
}
};
ff(tree);
return result;
}
console.log("结果", findId(tree, id)); // 结果 ['肉', '猪肉', '猪头肉']
// 这里为了方便查看,添加的是 label,需要 id 的话只要改动上面的两个 push