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

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

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

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.mzph.cn/news/827819.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图像的矩(MATLAB源码)

颜色矩(Color Moment)是一种用来描述图像颜色分布的统计特征。它可以用来衡量图像中不同颜色之间的关系,以及颜色分布的特征。常见的颜色矩包括一阶矩(Mean)、二阶矩(Variance)、三阶矩(Skewness)和四阶矩(Kurtosis)等。 颜色矩能够提供关于图像颜色分布的信息,例…

每天五分钟计算机视觉:基于YOLO算法精确分类定位图片中的对象

滑动窗口的卷积的问题 滑动窗口的卷积实现效率很高,但是它依然不能够输出最精准的边界框,比如下面所示: 我们可以看到蓝色框不论在什么位置都不能很好的确定车的位置,有一个算法是YOLO 算法它能够帮助我们解决这个问题。 YOLO 算法 比如我们的输入图像是100*100,我们会…

Vue3、Vite和HTML5之间的关系

Vue3、Vite 和 HTML5 分别代表不同的技术和概念,它们之间存在相互关联。 1、Vue3 Vue3是一个用于创建用户界面的 JavaScript 框架,通过数据绑定、组件化设计和响应式系统,帮助开发者高效构建和维护复杂的互动界面。Vue3 中的模板使用 HTML&…

前端npm详解

前端npm详解 引言 npm(Node Package Manager)是前端开发中不可或缺的工具,它允许开发者轻松地共享和使用他人编写的代码,同时管理项目依赖。 npm的历史 起源 npm最初是作为Node.js的官方包管理器诞生的,由Isaac Z…

【OceanBase诊断调优 】—— 如何快速定位SQL问题

作者简介: 花名:洪波,OceanBase 数据库解决方案架构师,目前负责 OceanBase 数据库在各大型互联网公司及企事业单位的落地与技术指导,曾就职于互联网大厂和金融科技公司,主导过多项数据库升级、迁移、国产化…

CSS的网页美化功能

<1>文字类 通常情况下&#xff0c;一般使用span对文字进行重点突出&#xff0c;用div来操作一段代码块。 字体的所有属性&#xff1a; 属性描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样…

5-内核开发-/proc File System 学习

5-内核开发-/proc File System 学习 课程简介&#xff1a; Linux内核开发入门是一门旨在帮助学习者从最基本的知识开始学习Linux内核开发的入门课程。该课程旨在为对Linux内核开发感兴趣的初学者提供一个扎实的基础&#xff0c;让他们能够理解和参与到Linux内核的开发过程中。…

经典案例|使用Supabase解决可视化大屏项目的常见问题

敏博科技专业致力于应急管理行业&#xff0c;提供以物联网技术和感知预警算法模型为核心的先进产品和解决方案。应急管理行业的业务非常繁多和复杂&#xff0c;很多时候都需要在短时间内交付出稳定高效的业务系统。如下两张图某市的安全生产监测预警系统 MemFire Cloud应用开…

spring boot项目怎么预防CSRF攻击

在Spring Boot项目中预防CSRF攻击通常涉及利用Spring Security框架提供的内置支持。Spring Security已经为CSRF提供了默认的防护措施&#xff0c;但根据应用的特定需求&#xff0c;可能需要进行一些配置调整或扩展。下面是一系列步骤和建议&#xff0c;用于在Spring Boot项目中…

Redis入门到通关之Redis数据结构-Hash篇

文章目录 ☃️ 概述☃️底层实现☃️源码☃️其他 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间与空间的平衡&#xff0c;0与1的延伸的后…

关于电脑卡死如何开机、F8、安全模式

问题来源和原因 亲戚家台式电脑无法开机了 原因&#xff1a;游戏、等等等东西太多占用内存&#xff0c;导致系统无法开机 比如常见的开机蓝屏&#xff0c;不能正常开机&#xff0c;这个时候我们可以采取通过安全模式启动的办法来启动电脑&#xff0c;从而进一步找到问题并排查故…

如何用基于 Java 配置的方式配置 Spring?

Spring 对 Java 配置的支持是由 Configuration 注解和 Bean 注解来实现的。 有 Bean 注解的 方法将会实例化、配置和初始化一个 新对象&#xff0c;这个对象将由 Spring 的 IoC 容器来管理。Bean 声明所起到的作用与 <bean/> 元素类似。被 Configuration 所注解的类则表…

模型部署的艺术:让深度学习模型跃入生产现实

模型部署的艺术&#xff1a;让深度学习模型跃入生产现实 1 引言 1.1 部署的意义&#xff1a;为何部署是项目成功的关键 在深度学习项目的生命周期中&#xff0c;模型的部署是其成败的关键之一。通常&#xff0c;一个模型从概念构思、数据收集、训练到优化&#xff0c;最终目的…

电子信息制造工厂5G智能制造数字孪生可视化平台,推进数字化转型

电子信息制造工厂5G智能制造数字孪生可视化平台&#xff0c;推进数字化转型。5G智能制造数字孪生可视化平台利用5G网络的高速、低延迟特性&#xff0c;结合数字孪生技术和可视化界面&#xff0c;为电子信息制造工厂提供了一种全新的生产管理模式。不仅提升生产效率&#xff0c;…

nodejs 中间件

一、是什么 Node.js 中的中间件&#xff0c;特别是针对 Web 开发框架&#xff08;如 Express、Koa、Hapi 等&#xff09;的中间件&#xff0c;其核心功能是用来对 HTTP 请求生命周期进行拦截、处理和传递的。 中间件这一概念是 Web 开发框架为了实现请求处理流程的模块化、可…

SpringBoot学习之Kafka下载安装和启动【Windows版本】(三十四)

一、配置Java环境变量 打开CMD输入java -version检查java环境变量是否配置正确,如果配置正确在CMD窗口输入java -version应该输出如下: ​ 怎么配置Java环境变量这里我就不赘叙了,网上教程很多,请读者自行搜索操作。 二、下载Kafka 1、Kafka官网地址:Apache Kafka,…

解决DataGrip连接MySQL8时出现时区错误问题

解决办法&#xff1a;在url后面拼接时区参数 ?serverTimezoneAsia/Shanghai

阿里云域名动态解析

前景说明&#xff1a; 你有一个阿里云的域名&#xff0c;想让它解析到你家用宽带动态ip上。 解决思路&#xff1a; 1、定时查看宽带的ip&#xff1b; 2、发现变化时&#xff0c;通过阿里云提供的sdk修改域名解析。 一、阿里云控制台创建AccessKey 官方文档&#xff1a;创…

智能合约:概念与特点(了解什么是智能合约以及它的特点,如自动执行、不可篡改和可信任)

1.自动执行 智能合约通过预定义的代码和规则&#xff0c;在满足特定条件时自动执行。无需第三方介入&#xff0c;合约中的操作将在预定条件满足时自动触发。 2.不可篡改 智能合约的代码一旦部署在区块链上&#xff0c;便不可更改。这意味着合约一旦被创建&#xff0c;其中的规则…

DS进阶:AVL树和红黑树

一、AVL树 1.1 AVL树的概念 二叉搜索树&#xff08;BST&#xff09;虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查找元素相当于在顺序表中搜索元素&#xff0c;效率低下。因此&#xff0c;两位俄罗斯的数学家G.M.Adelson-…