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

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

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

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

  1. const options = [
  2.   {
  3.     value: 'zhejiang2',
  4.     label: 'Zhejiang2',
  5.     family:'top',
  6.     children: [
  7.       {
  8.         value: 'hangzhou',
  9.         label: 'Hangzhou',
  10.         family:'zhejiang2',
  11.         children: [
  12.           {
  13.             value: 'xihu',
  14.             label: 'West Lake',
  15.           },
  16.         ],
  17.       },
  18.     ],
  19.   },
  20.   {
  21.     value: 'jiangsu',
  22.     label: 'Jiangsu',
  23.     family:'top',
  24.     children: [
  25.       {
  26.         value: 'nanjing',
  27.         label: 'Nanjing',
  28.         family:'Jiangsu',
  29.         children: [
  30.           {
  31.             value: 'zhonghuamen',
  32.             label: 'Zhong Hua Men',
  33.           },
  34.         ],
  35.       },
  36.     ],
  37.   },
  38. ]

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

  1. //递归函数
  2.   // 根据id取当前节点
  3.   const getNode = (data, id) => {
  4.     let result = null; // 运行结果
  5.     function getTreeItem (data, id) {
  6.       data.map(item => {
  7.         if (item.value === id) {
  8.           result = {...item};  // 结果赋值
  9.         } else {
  10.           if (item.children) {
  11.             getTreeItem(item.children, id);
  12.           }
  13.         }
  14.       });
  15.     }
  16.     getTreeItem(data, id);
  17.     return result;
  18.   };
  20.   // 获取层级数据
  21.   const getAllNode = (id) => {
  22.     let resultList = []; // 运行结果
  23.     function getLevelList (id) {
  24.       let currentId = id;
  25.       let node = getNode(list, currentId);
  26.       resultList.unshift({...node});
  27.       if (node && node.family && node.family !== 'top') {
  28.         getLevelList(node.family);
  29.       }
  30.     }
  31.     getLevelList(id);
  32.     return resultList?.map(item=>item?.value);
  33.   };

Cascader中获取默认值

  1. <Cascader options={list} defaultValue={getAllNode(id)} />

发表评论

表情：
评论列表 （有 0 条评论，514人围观）

还没有评论，来说两句吧...

相关阅读