js递归生成树形结构

情景一：返回的数据格式为array没有层级结构 靠pid关联 需要处理数据成树状结构

参考若依框架

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 * @param {*} rootId 根Id 默认 0
 */
export function handleTree(data, id, parentId, children, rootId) {
	id = id || 'id'
	parentId = parentId || 'parentId'
	children = children || 'children'
	rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
	//对源数据深度克隆
	const cloneData = JSON.parse(JSON.stringify(data))
	//循环所有项
	const treeData = cloneData.filter(father => {
		let branchArr = cloneData.filter(child => {
			//返回每一项的子级数组
			return father[id] === child[parentId]
		});
		branchArr.length > 0 ? father.children = branchArr : '';
		//返回第一层
		return father[parentId] === rootId;
	});
	return treeData != '' ? treeData : data;
}


//const list=this.handleTree(response.data, "menuId");

　　

 

 

情景二：

[
    {
        "id": 1,
        "name": "11111111楼",
        "parentId": 0
    },
    {
        "id": 2,
        "name": "2楼",
        "parentId": 0
    },
    {
        "id": 4,
        "name": "1楼儿子2",
        "parentId": 1
    },
    {
        "id": 6,
        "name": "你是谁啊",
        "parentId": 4
    },
    {
        "id": 12,
        "name": "566666",
        "parentId": 2
    },
    {
        "id": 13,
        "name": "33333楼",
        "parentId": 0
    },
    {
        "id": 14,
        "name": "7567566765",
        "parentId": 13
    },
    {
        "id": 15,
        "name": "1312",
        "parentId": 6
    }
]

　　

load() {
                loadCatOptions().then(res => {//发送请求获取数据
                    this.catOptions = this.generateOptions(res);
                    console.log(this.catOptions);
                })
            },
 
            generateOptions(params) {//生成Cascader级联数据
                var result = [];
                for (let param of params) {
                    if (param.parentId == 0) {//判断是否为顶层节点
                        var parent = {//转换成el-Cascader可以识别的数据结构
                            'label': param.name,
                            'value': param.id
                        }
                        parent.children = this.getchilds(param.id, params);//获取子节点
                        result.push(parent);
                    }
                }
                return result;
            },
 
            getchilds(id, array) {
                let childs = new Array();
                for (let arr of array) {//循环获取子节点
                    if (arr.parentId == id) {
                        childs.push({
                            'label': arr.name,
                            'value': arr.id
                        });
                    }
                }
                for (let child of childs) {//获取子节点的子节点
                    let childscopy = this.getchilds(child.value, array);//递归获取子节点
                    console.log(childscopy)
                    if (childscopy.length > 0) {
                        child.children = childscopy;
                    }
                }
                return childs;
            },

　　生成后：

[
    {
        "children": [
            {
                "children": [
                    {
                        "children": [
                            {
                                "label": "1312",
                                "value": 15
                            }
                        ],
                        "label": "你是谁啊",
                        "value": 6
                    }
                ],
                "label": "1楼儿子2",
                "value": 4
            }
        ],
        "label": "11111111楼",
        "value": 1
    },
    {
        "children": [
            {
                "label": "566666",
                "value": 12
            }
        ],
        "label": "2楼",
        "value": 2
    },
    {
        "children": [
            {
                "label": "7567566765",
                "value": 14
            }
        ],
        "label": "33333楼",
        "value": 13
    }
]

　　

https://blog.csdn.net/u013675978/article/details/90286757?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3