JS----前端将列表数据转树型数据

前端将列表数据转树型数据

场景:后端返回列表数据,由前端根据业务需求完成树型数据转换,

常用于侧边导航菜单,下拉树型数据项等

js 复制代码
export function listToTree(data: []) {
	var map: any = {},
		tree: any = []

	data.forEach((item: any) => {
		delete item?.children
		delete item?.params

		if (!item.label) {
			item.label = item?.name ?? item?.title
		}
		if (!item.value) {
			item.value = item?.id
		}

		map[item?.id] = item
	})

	/**
	 * 以原数据量循环拼装父,子级
	 */
	data.forEach((item: any) => {
		var parent = map[item?.pid]
		if (parent) {
			(parent.children || (parent.children = [])).push(item)
		} else {
			tree.push(item)
		}
	})

	return tree
}

如:菜单

相关推荐
刘天远1 小时前
Agent成本核算实现:事件表、状态分布与Python归集
前端·数据库·人工智能·python
欣欣之王来了1 小时前
开发环境准备:Node.js、npm、VS Code安装配置
前端·学习·架构·项目·vue3教程
xiaolinudao1231 小时前
将多个 Excel 表格中的数据合并到单个表中|6 种实现方案全解析
java·前端·excel
LRL_2 小时前
跨平台 Node 模块安装指南:如何利用 pnpm/npm 配置`supportedArchitectures` 锁定平台依赖
前端·npm·node.js
EatFan2 小时前
React 项目踩坑实录:useEffect 闭包陷阱、Context 性能陷阱与 React 18 升级避坑排查手册
前端·javascript·react.js·react·react hooks·useeffect·闭包陷阱
风骏时光牛马2 小时前
企业业务运营信息数据库
前端
IT_陈寒3 小时前
Vue的数组更新把我坑惨了
前端·人工智能·后端
于航3 小时前
分层上下文压缩,幻觉检测,错误累积概要
前端
数据掘金3 小时前
鸿蒙统计的权限弹窗怎么适配?
前端
数据掘金3 小时前
鸿蒙统计的多设备协同数据怎么打通?
前端