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

devtools/2024/9/23 1:03:37/

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

场景:后端返回列表数据,由前端根据业务需求完成树型数据转换,
常用于侧边导航菜单,下拉树型数据项等

export function listToTree(data: []) {var map: any = {},tree: any = []data.forEach((item: any) => {delete item?.childrendelete item?.paramsif (!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
}

如:菜单
在这里插入图片描述


http://www.ppmy.cn/devtools/19110.html

相关文章

webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用

本文讲的全部知识点,都是和webpack相关的。如果你之前有疑问,那本文一定能帮你搞清楚。 问题来源一般是类似下面代码(webpack.json中): "scripts": {"dev": "cross-env NODE_ENVdevelopmen…

C语言:插入排序

插入排序 1.解释2.步骤3.举例分析示例结果分析 1.解释 插入排序是一种简单直观的排序算法,它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入。插入排序在实现上,通常采…

TCP相关问题总结

文章目录 TCP连接建立过程1. TCP三次握手2. TCP四次挥手3. TCP为什么是三次握手4. TCP为什么是四次挥手 TCP流量控制TCP拥塞控制1. 为什么需要拥塞控制2. 控制手段 TCP连接建立过程中出现丢包 TCP连接建立过程 1. TCP三次握手 首先client端发出连接请求,并且请求同…

03-JAVA设计模式-命令模式

命令模式 什么是命令模式 命令模式(Command Pattern)是一种行为设计模式,它将请求封装为对象,从而使你可用不同的请求把客户端与请求的处理者解耦,也称动作模式或事物模式。 在命令模式中,命令对象封装了接收者对象…

【TensorFlow深度学习】前向传播实战:从理论到代码实现

前向传播实战:从理论到代码实现 1. 前向传播理论基础1.1 激活函数1.2 损失函数 2. 构建神经网络2.1 导入TensorFlow2.2 定义网络参数2.3 初始化权重和偏置2.4 实现前向传播 3. 损失函数和梯度计算3.1 定义损失函数3.2 计算梯度 4. 参数更新和训练过程4.1 选择优化器…

基于51单片机的声音分贝测量与显示仿真

基于51单片机的声音分贝测量显示 (仿真+程序) 功能介绍 具体功能: 1.使用滑动变阻器模拟仿真声音采集; 2.ADC0832将模拟信号转化成数字信号; 3.LCD1602实时显示噪音值(精度0.1db&#xff09…

【pycharm】调试模式中四个常用按钮介绍

【pycharm】调试模式中四个常用按钮介绍 在 PyCharm 的调试模式中,有四个常用的按钮,它们的功能如下: Step Over (F8):单步执行,但在遇到函数调用时,不会进入函数内部,而是将整个函数作为一步执…

Linux多进程(四) 守护进程

守护进程(Daemon Process),也就是通常说的 Daemon 进程(精灵进程),是 Linux 中的后台服务进程。它是一个生存期较长的进程,通常独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件…