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
}

如:菜单

相关推荐
rising start2 分钟前
四、CSS选择器(续)和三大特性
前端·css
一 乐21 分钟前
高校后勤报修系统|物业管理|基于SprinBoot+vue的高校后勤报修系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·毕设
爱喝水的小周23 分钟前
《UniApp 页面配置文件pages.json》
前端·uni-app·json
mapbar_front28 分钟前
React中useContext的基本使用和原理解析
前端·react.js
贪婪的君子1 小时前
【每日一面】实现一个深拷贝函数
前端·js
那年窗外下的雪.1 小时前
鸿蒙ArkUI布局与样式进阶(十五)—— 模块化 · 自定义组件 · 泛型机制深度解析
javascript·华为·typescript·harmonyos·鸿蒙·arkui
一点七加一2 小时前
Harmony鸿蒙开发0基础入门到精通Day09--JavaScript篇
开发语言·javascript·ecmascript
_安晓2 小时前
Rust 中精确大小迭代器(ExactSizeIterator)的深度解析与实践
java·前端·python
烛阴2 小时前
从create到yield:Lua协程完全上手指南
前端·lua
薛一半2 小时前
Vue3的Pinia详解
前端·javascript·vue.js