el-cascader组件返回值处理成树形结构(方法进阶版)

 const arr = [
      [10000, 10001, 10067, 10068],
      [10000, 10001, 10069],
      [10000, 10003, 10071],
      [10004, 10006, 10075]
    ]

定义方法

将[10000,10001,10069]
处理成链式结构[{name:10000,child:[{name:10001,child:[{name:10069,child:[]}]}]}]

  function arr2List(arr) {
      const list = [];
      const head = {
        name: arr[0],
        child: [],
      };
      let prev = head;
      list.push(prev);
      for (let i = 1; i < arr.length; i++) {
        const current = {
          name: arr[i],
          child: [],
        };
        prev.child.push(current);//prev push list里 prev直接变化 
        prev = current;// prev又变为 current ,list里prev不会变化
      }
      return list;
    }

定义方法 可以将有共同的父节点的子节点合并到一起

 function mergeList(tree, list) {
      if (!tree) {
        return;
      }
      const hasCommonParent = tree.some(treeItem => {
        // 有共同的父节点
        if (treeItem.name === list[0].name) {
          mergeList(treeItem.child, list[0].child);
          return true;
        }
        return false;
      })

      if (!tree.length || !hasCommonParent) {
        tree.push(list[0]);
      }
    }

例如

let tree = [
      {
        name: 10000,
        child: [
          {
            name: 10001,
            child: [
              { name: 10069, child: [] }
            ]
          }
        ]
      }
    ]
let list2 = [
      {
        name: 10000,
        child: [
          {
            name: 10001,
            child: [
              { name: 10071, child: [] }
            ]
          }
        ]
      }
    ]
mergeList(tree,list2)
//最终 数组tree会变为这样的结构
[
      {
        name: 10000,
        child: [
          {
            name: 10001,
            child: [
              { name: 10069, child: [] },
              { name: 10071, child: [] }
            ]
          }
        ]
      }
    ]

最终方法

 function arr2Tree(arr) {
      const tree = [];
      arr.forEach((item) => {
        const list = arr2List(item);
        mergeList(tree, list);
      });
      return tree;
    }
 

调用

   let params = arr2Tree(arr);``
    console.log(params);

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值