js递归获取树节点的层级结构

柔情只为你懂 2022-10-12 01:17 426阅读 0赞

因为有个地方使用的antd的Cascader，Cascader的数据结构为树结构，默认值为数组形式，所以我需要对自己的数据进行整理。

将我的数组整理成类似如下的结构，family是我自己添加的，为了方便后面遍历的时候，能够更好的获取父节点

const options = [
      {
        value: 'zhejiang2',
        label: 'Zhejiang2',
        family:'top',
        children: [
          {
            value: 'hangzhou',
            label: 'Hangzhou',
            family:'zhejiang2',
            children: [
              {
                value: 'xihu',
                label: 'West Lake',
              },
            ],
          },
        ],
      },
      {
        value: 'jiangsu',
        label: 'Jiangsu',
        family:'top',
        children: [
          {
            value: 'nanjing',
            label: 'Nanjing',
            family:'Jiangsu',
            children: [
              {
                value: 'zhonghuamen',
                label: 'Zhong Hua Men',
              },
            ],
          },
        ],
      },
    ]

树结构遍历，获取当前选中值的id

//递归函数
      // 根据id取当前节点
      const getNode = (data, id) => {
        let result = null; // 运行结果
        function getTreeItem (data, id) {
          data.map(item => {
            if (item.value === id) {
              result = {...item};  // 结果赋值
            } else {
              if (item.children) {
                getTreeItem(item.children, id);
              }
            }
          });
        }
        getTreeItem(data, id);
        return result;
      };
    
      // 获取层级数据
      const getAllNode = (id) => {
        let resultList = []; // 运行结果
        function getLevelList (id) {
          let currentId = id;
          let node = getNode(list, currentId);
          resultList.unshift({...node});
          if (node && node.family && node.family !== 'top') {
            getLevelList(node.family);
          }
        }
        getLevelList(id);
        return resultList?.map(item=>item?.value);
      };

Cascader中获取默认值