手撸数组转树,无限极转

4 篇文章 0 订阅

在使用element-ui的el-tree,由于后端返回的是一个常规数组,于是便手撸了一个数组转数的方法。留存于此,以便日后方便。

代码如下:

后端返回的数据:

        let arrData = [
            {id: 1, name: '1', parentId: null},
            {id: 2, name: '2', parentId: null},
            {id: 3, name: '1-1', parentId: 1},
            {id: 4, name: '1-2', parentId: 1},
            {id: 5, name: '2-1', parentId: 2},
            {id: 6, name: '2-2', parentId: 2},
            {id: 7, name: '1-1-1', parentId: 3},
            {id: 8, name: '1-2-1', parentId: 4},
            {id: 9, name: '1-2-2', parentId: 4},
            {id: 10, name: '2-1-1', parentId: 5},
            {id: 11, name: '2-2-1', parentId: 6},
        ]
        /* 
            传参:
            arg1: Array, 原数组
            arg2:{ // 默认字段名
                id: 'id',
                parentId: 'parentId',
                children : 'children',
                initialVal: null  // 默认一级菜单的parentId值
            }
         */
        function arrayToTree(array,propNames = {}) {
            let {
                _id = 'id',
                parentId = 'parentId',
                children = 'children',
                initialVal = null
              } = propNames;
            return loopArr(array,_id,parentId,children,initialVal);  
        }
        function loopArr(array,_id,parentId,children,initialVal) {
            let arr = array.filter(item => item[parentId] === initialVal);
            let arr1 = array.filter(item => item[parentId] !== initialVal);
            if(arr.length && arr1.length) {
                arr = arr.map(item => {
                    item[children] = loopArr(arr1,_id,parentId,children,item[_id])
                    return item;
                })
            }
            return arr;
        }
        console.log(arrayToTree(arrData)) //调用方法

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值