Json 数组转树结构

点击查看代码

data : [
            {id:1,parentId:0,name:"一级菜单A",rank:1},
            {id:2,parentId:0,name:"一级菜单B",rank:1},
            {id:3,parentId:0,name:"一级菜单C",rank:1},
            {id:4,parentId:1,name:"二级菜单A-A",rank:2},
            {id:5,parentId:1,name:"二级菜单A-B",rank:2},
            {id:6,parentId:2,name:"二级菜单B-A",rank:2},
            {id:7,parentId:4,name:"三级菜单A-A-A",rank:3},
            {id:8,parentId:7,name:"四级菜单A-A-A-A",rank:4},
            {id:9,parentId:8,name:"五级菜单A-A-A-A-A",rank:5},
            {id:10,parentId:9,name:"六级菜单A-A-A-A-A-A",rank:6},
            {id:11,parentId:10,name:"七级菜单A-A-A-A-A-A-A",rank:7},
            {id:12,parentId:11,name:"八级菜单A-A-A-A-A-A-A-A",rank:8},
            {id:13,parentId:12,name:"九级菜单A-A-A-A-A-A-A-A-A",rank:9},
            {id:14,parentId:13,name:"十级菜单A-A-A-A-A-A-A-A-A-A",rank:10},
          ]

方法一：

treeData(source, id, parentId, children) {
	// 调用时，字段名以字符串的形式传参，如treeData(source, 'id', 'parentId', 'children')
	let cloneData = JSON.parse(JSON.stringify(source));
	return cloneData.filter(father => {
		let branchArr = cloneData.filter(child => father[id] == child[parentId]);
		branchArr.length > 0 ? father[children] = branchArr : '';
		return father[parentId] == 0 // 如果第一层不是parentId=0，请自行修改
		})
     }

方法二：

			handleTree(data) {
				// 删除 所有 children,以防止多次调用
				data.forEach(function(item) {
					delete item.children;
				});
				// 将数据存储为 以 id 为 KEY 的 map 索引数据列
				let map = {};
				data.forEach(function(item) {
					map[item.id] = item;
				});
				let val = [];
				data.forEach(function(item) {
					// 以当前遍历项，的pid,去map对象中找到索引的id
					let parent = map[item.Parent];
					// 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						// 如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
						val.push(item);
					}
				});
				return val;
			},