Tree 树形控件递归数组处理成组件想要的格式

最新推荐文章于 2024-09-13 23:50:28 发布

是小芬达啊

最新推荐文章于 2024-09-13 23:50:28 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript ui

本文链接：https://blog.youkuaiyun.com/weixin_52921391/article/details/121826871

版权

这篇博客介绍了如何将后端传递的非递归数组转换为适用于Vue树形控件的递归数组。通过一个名为`handleTree`的函数，实现了根据`pid`字段构建树形结构，函数接受四个参数，包括数据、自身标识字段、父数据标识字段和递归数组字段。示例中展示了如何使用该函数将处理后的数据赋值给`treeList`，以供Vue组件使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在vue项目开发过程中，免不了要使用树形控件，基本上Ui组件库都需要的是递归数组，比如[{id:1,name:'xxx',chidren:[{id;11,name:'xxx',children:[{d;111,name:'xxx'}]}]},{id:2,name:'xxx',chidren:[]}]，但是后端传给我们的数据可能不是这种处理好的数组，比如传的是这样的格式：

				[{id:1,pid:0,name:'xxx'},
                {id:11,pid:1,name:'xxx'},
                {id:111,pid:11,name:'xxx'},
                {id:112,pid:11,name:'xxx'},
                {id:2,pid:0,name:'xxx'},
                {id:12,pid:1,name:'xxx'},]

那么我们就要去处理这个数据再赋值给树状控件数组，这里采用了若依的方法处理数据

//第一个参数是后端传的数据，第二个参数是自身的标识字段，第三个参数是绑定的父数据标识字段，第四个数据是递归数组的字段（第一个参数是必传，第二个参数不传默认字段就是'id'，第三个参数不传默认字段就是'parentId'，，第三个参数不传默认字段就是'children'）
export function handleTree(data, id, parentId, children) {
	let config = {
		id: id || 'id',
		parentId: parentId || 'parentId',
		childrenList: children || 'children'
	};

	var childrenListMap = {};
	var nodeIds = {};
	var tree = [];

	for (let d of data) {
		let parentId = d[config.parentId];
		if (childrenListMap[parentId] == null) {
			childrenListMap[parentId] = [];
		}
		nodeIds[d[config.id]] = d;
		childrenListMap[parentId].push(d);
	}

	for (let d of data) {
		let parentId = d[config.parentId];
		if (nodeIds[parentId] == null) {
			tree.push(d);
		}
	}

	for (let t of tree) {
		adaptToChildrenList(t);
	}

	function adaptToChildrenList(o) {
		if (childrenListMap[o[config.id]] !== null) {
			o[config.childrenList] = childrenListMap[o[config.id]];
		}
		if (o[config.childrenList]) {
			for (let c of o[config.childrenList]) {
				adaptToChildrenList(c);
			}
		}
	}
	return tree;
}