js,根据树结构的某个子节点id,返回该节点的全路径。

349 阅读1分钟

最近用 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