扁平数据

在这里插入图片描述

转为最终效果

在这里插入图片描述

[{"label":"疼逊有限公司","code":"1212","disabled":false,"parentId":"none","children":[{"label":"财务部","code":"34343","disabled":false,"parentId":"1212"},{"label":"人事部","code":"43434","disabled":false,"parentId":"1212"},{"label":"经营 部","code":"53543","disabled":false,"parentId":"1212","children":[{"label":"市场部","code":"23232","disabled":true,"parentId":"53543"},{"label":"销售部","code":"3435435","disabled":false,"parentId":"53543"}]}]}]

/*** 删除子级数据为空的子级* @param {[]} node * @param {string} [childKey='children'] 子级字段 默认-children* @returns {[]}*/
const removeNoneDataChildren = (node, childKey = 'children') => {const remove = nodeItem => {if (nodeItem[childKey] && nodeItem[childKey].length === 0) {delete nodeItem[childKey];} else if (nodeItem[childKey]) {nodeItem[childKey].forEach(remove);}}node.forEach(remove);return node
}/*** 扁平数据转树结构* @param {[]} flatList 扁平化树的数据* @param {String} [idKey="id"] 主字段 默认-id* @param {String} [parentKey="parentId"] 父级字段 默认-parentId* @param {string} [childKey='children'] 子级字段 默认-children* @param {boolean} [delNoneDataChildren=true] 删除子级数据为空的子级 默认-true* @returns {[]}*/
const buildTree = (flatList, idKey = 'id', parentKey = 'parentId', childKey = 'children', delNoneDataChildren = true) => {const map = {};const roots = [];flatList.forEach(item => {map[item[idKey]] = { ...item, [childKey]: [] };});flatList.forEach(item => {const itemId = item[idKey];const parentId = item[parentKey];if (parentId !== null && map[parentId]) {map[parentId][childKey].push(map[itemId]);} else {roots.push(map[itemId]);}});if (delNoneDataChildren) return removeNoneDataChildren(roots, childKey);return roots;
}// 使用
const test =[{label:'疼逊有限公司',code:'1212',disabled:false,parentId:'none'},{label:'财务部',code:'34343',disabled:false,parentId:'1212'},{label:'人事部',code:'43434',disabled:false,parentId:'1212'},{label:'经营部',code:'53543',disabled:false,parentId:'1212'},{label:'市场部',code:'23232',disabled:true,parentId:'53543'},{label:'销售部',code:'3435435',disabled:false,parentId:'53543'}];
// 使用自定义字段
const tree = buildTree(test, 'code', 'parentId', 'children');
console.log("1 ~ tree:", JSON.stringify(tree))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/917925.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/917925.shtml
英文地址,请注明出处:http://en.pswp.cn/news/917925.shtml

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

相关文章

数据结构4-栈、队列

摘要:本文系统介绍了栈和队列两种基础数据结构。栈采用"先进后出"原则,分为顺序栈和链式栈,详细说明了压栈、出栈等基本操作及其实现方法。队列遵循"先进先出"规则,同样分为顺序队列和链式队列,重…

大数据spark、hasdoop 深度学习、机器学习算法的音乐平台用户情感分析系统设计与实现

大数据spark、hasdoop 深度学习、机器学习算法的音乐平台用户情感分析系统设计与实现

视频汇聚系统EasyCVR调用设备录像保活时视频流不连贯问题解决方案

在使用EasyCVR过程中,有用户反馈调用设备录像保活功能时,出现视频流不连贯的情况。针对这一问题,我们经过排查与测试,整理出如下解决步骤,供开发者参考:具体解决步骤1)先调用登录接口完成鉴权确…

【保姆级喂饭教程】python基于mysql-connector-python的数据库操作通用封装类(连接池版)

目录项目环境一、db_config.py二、mysql_executor.py三、test/main.py在使用mysql-connector-python连接MySQL数据库的时候,如同Java中的jdbc一般,每条sql需要创建和删除连接,很自然就想到写一个抽象方法,但是找了找没有官方标准的…

【MCP服务】蓝耘元生代 | 蓝耘MCP平台来袭!DeepSeek MCP服务器玩转大模型集成

【作者主页】Francek Chen 【专栏介绍】⌈⌈⌈人工智能与大模型应用⌋⌋⌋ 人工智能(AI)通过算法模拟人类智能,利用机器学习、深度学习等技术驱动医疗、金融等领域的智能化。大模型是千亿参数的深度神经网络(如ChatGPT&#xff09…

Spring Boot 整合 Minio 实现高效文件存储解决方案(本地和线上)

文章目录前言一、配置1.配置文件:application.yml2.配置类:MinioProperties3.工具类:MinioUtil3.1 初始化方法3.2 核心功能3.3 关键技术点二、使用示例1.控制器类:FileController2.服务类3.效果展示总结前言 Minio 是一个高性能的…

【Unity3D实例-功能-镜头】第三人称视觉-镜头优化

这一篇我们一起来调整一下Cinemachine的第三人称视觉的镜头设置。一般用于ARPG角色扮演游戏的场景中。Unity里头,这种视角简直就是标配。来吧,咱们一起研究研究怎么调出这种视角效果!目录:1.调整虚拟摄像机的Y轴2.调整虚拟摄像机的…

二叉树算法之【中序遍历】

目录 LeetCode-94题 LeetCode-94题 给定一个二叉树的根节点root&#xff0c;返回它的中序遍历结果。 class Solution {public List<Integer> inorderTraversal(TreeNode root) {List<Integer> result new ArrayList<>();order(root, result);return res…

Android14的QS面板的加载解析

/frameworks/base/packages/SystemUI/src/com/android/systemui/statusbar/phone/CentralSurfacesImpl.java QS 面板的创建 getNotificationShadeWindowView()&#xff1a;整个systemui的最顶级的视图容器&#xff08;super_notification_shade.xml&#xff09;R.id.qs_frame &…

解锁webpack核心技能(二):配置文件和devtool配置指南

一、配置文件webpack 提供的 cli 支持很多的参数&#xff0c;例如 --mode 。在我们平时的开发过程中&#xff0c;我们要学习很多的功能&#xff0c;这些很多都是可以用参数来完成的。那么后边就会导致参数越来越多&#xff0c;我们使用命令特别的不方便&#xff0c;所以我们会使…

Gitlab+Jenkins+K8S+Registry 建立 CI/CD 流水线

一、前言 DevOps是一种将开发&#xff08;Development&#xff09;和运维&#xff08;Operations&#xff09;相结合的软件开发方法论。它通过自动化和持续交付的方式&#xff0c;将软件开发、测试和部署等环节紧密集成&#xff0c;以提高效率和产品质量。在本篇博客中&#xf…

【Linux】特效爆满的Vim的配置方法 and make/Makefile原理

一、软件包管理器 1、Linux下安装软件的常见方式&#xff1a; 1&#xff09;源代码安装——不推荐。 2&#xff09;rpm包安装——不推荐。 3&#xff09;包管理器安装——推荐 2、安装软件命令 # Centos$ sudo yum install -y lrzsz# Ubuntu$ sudo apt install -y lrzsz 3、卸…

Spring Boot Actuator 监控功能的简介及禁用

Spring Boot Actuator: Production-ready Features 1. 添加依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency> </dependencie…

Matlab(1)

一、基本操作1. matlab四则运算规则&#xff1a;先乘除后加减&#xff0c;从左到右2、对数和指数的表示sin(pi^0.5)log(tan(1))exp&#xff08;sin&#xff08;10&#xff09;&#xff09;3、类型&#xff1a;matlab变量默认为double4、who&whos&#xff1a;命令行输入who&…

Kotlin Android 开发脚手架封装

Kotlin Android 开发脚手架封装&#xff08;模块化版本&#xff09; 我将按照模块化设计原则&#xff0c;将脚手架拆分为多个文件&#xff0c;每个文件负责特定功能领域&#xff1a; 1. 核心初始化模块 文件路径: core/AppScaffold.kt object AppScaffold {lateinit var contex…

Flutter 报错解析:No TabController for TabBar 的完整解决方案

目录 Flutter 报错解析&#xff1a;No TabController for TabBar 的完整解决方案 一、错误场景&#xff1a;当 TabBar 失去 "指挥官" 二、为什么 TabBar 必须依赖 Controller&#xff1f; 1. TabBar 与 TabController 的协作关系 2. 状态管理的核心作用 3. 实战…

【24】C++实战篇——【 C++ 外部变量】 C++多个文件共用一个枚举变量,外部变量 extern,枚举外部变量 enum

文章目录1 方法2 外部变量 应用2.1 普通外部全局变量2.2 枚举外部全局变量 应用2.2.2 枚举外部变量优化c多个文件中如何共用一个全局变量 c头文件的使用和多个文件中如何共用一个全局变量 C共享枚举类型给QML 1 方法 ①头文件中 声明外部全局变量&#xff1b; ②在头文件对…

Linux SELinux 核心概念与管理

Linux SELinux 核心概念与管理一、SELinux 基本概念 SELinux 即安全增强型 Linux&#xff08;Security-Enhanced Linux&#xff09;&#xff0c;由美国国家安全局&#xff08;NSA&#xff09;开发&#xff0c;是一套基于强制访问控制&#xff08;MAC&#xff09;的安全机制&…

Git 中**未暂存**和**未跟踪**的区别:

文件状态分类 Git 中的文件有以下几种状态&#xff1a; 工作区文件状态&#xff1a; ├── 未跟踪 (Untracked) ├── 已跟踪 (Tracked)├── 未修改 (Unmodified) ├── 已修改未暂存 (Modified/Unstaged)└── 已暂存 (Staged)1. 未跟踪 (Untracked) 定义&#xff1a;Gi…

前端1.0

目录 一、 什么是前端 二、 HTML 1.0 概述 2.0 注释 三、开发环境的搭建 1.0 插件 2.0 笔记 四、 常见标签&#xff08;重点&#xff09; 四、案例展示&#xff08;图片代码&#xff09; 五、CSS引入 一、 什么是前端 web前端 用来直接给用户呈现一个一个的网页 …