Vue实战（九）：实现平铺数据与树形结构数据之间的互相转换

Vue实战（九）：实现平铺数据与树形结构数据之间的互相转换

1、定义平铺数据

let data = [
	{ id: 1, name: "菜单1" },
	{ id: 2, parent_id: 1, name: "菜单1-1" },
	{ id: 3, parent_id: 1, name: "菜单1-2" },
	{ id: 4, name: "菜单2" },
	{ id: 5, parent_id: 4, name: "菜单2-1" },
	{ id: 6, parent_id: 4, name: "菜单2-2" },
];

2、平铺数据转树形结构数据

//递归方式：将平铺数据转换为树形结构数据
getTrees(list, parent_id = 0) {
	let parentObj = {};
	list.forEach((o) => {
		parentObj[o.id] = o;
	});
	if (!parent_id) {
		return list
			.filter((o) => !parentObj[o.parent_id])
			.map((o) => ((o.children = this.getTrees(list, o.id)), o));
	} else {
		return list
			.filter((o) => o.parent_id == parent_id)
			.map((o) => ((o.children = this.getTrees(list, o.id)), o));
	}
},
//非递归方式：将平铺数据转换为树形结构数据
arrToTree(arr) {
    let data = arr.filter(item => {
        item.children = arr.filter(e => {
            return item.id === e.parent_id
        })
        return !item.parent_id
    })
    return data;
}

3、去除树形结构中的空children

//去除转换树形结构数据后存在的空children
deleteChildren(arr) {
	let childs = arr;
	for (let i = childs.length; i--; i > 0) {
		if (childs[i].children) {
			if (childs[i].children.length) {
				this.deleteChildren(childs[i].children);
			} else {
				delete childs[i].children;
			}
		}
	}
	return arr;
}

运行结果：

let treeData = [
	{ "id": 1, "name": "菜单1", "children": [
		{ "id": 2, "parent_id": 1, "name": "菜单1-1"}, 
		{ "id": 3, "parent_id": 1, "name": "菜单1-2"}
	]}, 
	{ "id": 4, "name": "菜单2", "children": [
		{ "id": 5, "parent_id": 4, "name": "菜单2-1"}, 
		{ "id": 6, "parent_id": 4, "name": "菜单2-2"}
	]}
]

3、树形结构数据转平铺数据

//将树形结构数据转换为平铺数据
treeToArr(arr){
	let result = [];
	let node = [];
	node = node.concat(arr);
	while(node.length){
		let first = node.shift();
		if(first.children){
			node = node.concat(first.children);
			delete first.children;
		}
		console.log('first',first);
		result.push(first);
	}
	return result;
}

运行结果：

let arrData = [
	{ "id": 1, "name": "菜单1"}, 
	{ "id": 4, "name": "菜单2"}, 
	{ "id": 2, "parent_id": 1, "name": "菜单1-1"}, 
	{ "id": 3, "parent_id": 1, "name": "菜单1-2"}, 
	{ "id": 5, "parent_id": 4, "name": "菜单2-1"}, 
	{ "id": 6, "parent_id": 4, "name": "菜单2-2"}
]