vue javascript tree 层级数据处理

层级数据是有父子关系的数组,示例:

const treeData = [{id: '1b7e8e98cb1d4a1f81e4fe2dfd9a8458',name: '层级1',parentId: null,children: [{id: '0d45dd5bb4c14d64a3ab0b738add4b24',name: '层级1-1',parentId: '1b7e8e98cb1d4a1f81e4fe2dfd9a8458',children: [{id: 'd559c08b408b46e08fc66ad6e653425d',name: '层级1-1-1',parentId: '1b7e8e98cb1d4a1f81e4fe2dfd9a8458',},{id: '83bdbc6a873842d69b849532c68aa1d2',name: '层级1-1-2',parentId: '1b7e8e98cb1d4a1f81e4fe2dfd9a8458',},],},{id: 'edbaec28dde842a781cdfd9c3df1d6a0',name: '层级1-2',parentId: '1b7e8e98cb1d4a1f81e4fe2dfd9a8458',},],},{id: 'eb6005ef3c634921b20d4dd368934da3',name: '层级2',parentId: null,children: [{id: 'e8ce379630824bf39e6b16c6c3b103d8',name: '层级2-1',parentId: 'eb6005ef3c634921b20d4dd368934da3',},],},{id: '13052d2aaace4be6928e207199453dfc',name: '层级3',parentId: null,},
];

扁平化数据是一个一维数组,示例:

const array = [{"id": "1b7e8e98cb1d4a1f81e4fe2dfd9a8458","name": "层级1","parentId": null},{"id": "0d45dd5bb4c14d64a3ab0b738add4b24","name": "层级1-1","parentId": "1b7e8e98cb1d4a1f81e4fe2dfd9a8458"},{"id": "d559c08b408b46e08fc66ad6e653425d","name": "层级1-1-1","parentId": "0d45dd5bb4c14d64a3ab0b738add4b24"},{"id": "83bdbc6a873842d69b849532c68aa1d2","name": "层级1-1-2","parentId": "0d45dd5bb4c14d64a3ab0b738add4b24"},{"id": "edbaec28dde842a781cdfd9c3df1d6a0","name": "层级1-2","parentId": "1b7e8e98cb1d4a1f81e4fe2dfd9a8458"},{"id": "eb6005ef3c634921b20d4dd368934da3","name": "层级2","parentId": null},{"id": "e8ce379630824bf39e6b16c6c3b103d8","name": "层级2-1","parentId": "eb6005ef3c634921b20d4dd368934da3"},{"id": "13052d2aaace4be6928e207199453dfc","name": "层级3","parentId": null}
];

层级数据转换成扁平化数据

const generateList = (tree) => {let dataList = [];const getList = (data, parentId) => {for (const item of data) {dataList.push({id: item.id,name: item.name,parentId,});if (item.children) {getList(item.children, item.id);}}}getList(tree, null);return dataList;
};const array = generateList(treeData);
console.log(array);

在这里插入图片描述

找到某一个子元素的所有祖先元素

const getAncestor= (tree, id) => {const ancestor = [];const getParent = (tree, id) => {for (const item of tree) {if (item.id === id) {ancestor.unshift({ id: item.id, name: item.name });return true;}if (item.children && item.children.length > 0 && getParent(item.children, id)) {ancestor.unshift({ id: item.id, name: item.name });return true;}}return false;};getParent(tree, id);return ancestor;
};const child = {id: '83bdbc6a873842d69b849532c68aa1d2',name: '层级1-1-2',
};
const ancestors = getAncestor(treeData, child.id);
console.log(ancestors);

在这里插入图片描述

找到某一个父元素的所有子元素们

const getDeepChildren = (tree) => {const array = [];const getChildren = (tree) => {tree.forEach(({ id, name, children }) => {array.push({ id, name });if (children) {getDeepChildren(tree);}});}getChildren(tree);return array;
};
const getChildren = (tree, childId) => {const array = [];const getChildren = (tree, childId) => {tree.forEach(({ id, name, parentId, children }) => {if (parentId === childId) {array.push({ id, name });if (children) {const allChildren = getDeepChildren(children);array.push(...allChildren);}} else if (children) {getChildren(children, childId);}});};getChildren(tree, childId);return array;
};const parent = {id: '1b7e8e98cb1d4a1f81e4fe2dfd9a8458',name: '层级1',
};
const children = getChildren(treeData, parent.id);
console.log(children);

在这里插入图片描述

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

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

相关文章

【STM32入门】4.1中断基本知识

1.中断概览 在开展红外传感器遮挡计次的实验之前,有必要系统性的了解“中断”的基本知识. 中断是指:在主程序运行过程中,出现了特定的中断触发条件(中断源),使得CPU暂停当前正在运行的程序,转…

2.electron之纯原生js/jquery的桌面应用程序(应用篇)

如果可以实现记得点赞分享,谢谢老铁~ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中,因此它允许你仅需一个代码仓库,就可以撰写支持 Windows、…

pytest + yaml 框架 -59.用例失败重跑机制pytest-rerunfailures

前言 有些接口可能不太稳定,第一次跑的时候由于网络原因或者其它原因失败,但是重新跑2次又成功了。 对于这种需要重新跑几次的场景,可以使用用例失败重跑机制,需安装pytest-rerunfailures 插件。 场景示例 失败重跑需要依赖 py…

直播美颜SDK开发实战:从入门到精通

直播美颜SDK的应用已经成为许多直播平台和开发者关注的焦点。本文将带领读者深入探讨直播美颜SDK的开发实战,从入门到精通的过程。 1.引言 直播美颜SDK是一种集成了图像处理、人脸识别、滤镜算法等技术的开发工具包。通过使用该SDK,开发者能够为直播应…

Tekton 基于 cronjob 触发流水线

Tekton 基于 cronjob 触发流水线 Tekton EventListener 在8080端口监听事件,kubernetes 原生 cronjob 定时通过curl 命令向 EventListener 发送事件请求,触发tekton流水线执行,实现定时运行tekton pipeline任务。 前置要求: kub…

如何在Kali Linux安装Xrdp+cpolar内网穿透实现远程访问Kali系统

文章目录 前言1. Kali 安装Xrdp2. 本地远程Kali桌面3. Kali 安装Cpolar 内网穿透4. 配置公网远程地址5. 公网远程Kali桌面连接6. 固定连接公网地址7. 固定地址连接测试 前言 Kali远程桌面的好处在于,它允许用户从远程位置访问Kali系统,而无需直接物理访…

luceda ipkiss教程 49:以pcell的方式定义线路

在ipkiss中,通常以i3.Circuit来设计线路(见教程2),以i3.Pcell的框架也可以来设计线路: 以SplitterTree为例: 线路仿真结果: 所有代码如下: from si_fab import all as pdk import…

[css] flex wrap 九宫格布局

<div class"box"><ul class"box-inner"><li>九宫格1</li><li>九宫格2</li><li>九宫格3</li><li>九宫格4</li><li>九宫格5</li><li>九宫格6</li><li>九宫格7&l…

Android BluetoothAdapter 使用(二)

Android BluetoothAdapter 使用(二) 本篇文章主要讲下蓝牙设备的配对. 1: 蓝牙设备列表展示 下 面是蓝牙设备adapter的代码: package com.test.bluetooth;import android.bluetooth.BluetoothDevice; import android.content.Context; import android.view.LayoutInflater;…

Leetcode—459.重复的子字符串【简单】

2023每日刷题&#xff08;五十九&#xff09; Leetcode—459.重复的子字符串 算法思想 巧解的算法思想 实现代码 从第一个位置开始到s.size()之前&#xff0c;看s字符串是否是ss的子串 class Solution { public:bool repeatedSubstringPattern(string s) {return (s s).fin…

DDoS原生防护和Web应用防火墙组合使用方案

本文介绍了为网站类业务同时部署DDoS原生防护和Web应用防火墙的配置方法。该方案适用于为网站业务同时防御四层DDoS攻击和七层Web攻击、CC攻击的场景。 前提条件 已创建ECS实例并部署了业务相关的应用&#xff0c;ECS实例拥有公网IP地址且网站有域名。 说明 如果网站用于在中国…

python初试二

连接数据库 Django为多种数据库后台提供了统一的调用API。根据需求不同&#xff0c;Django可以选择不同的数据库后台。MySQL算是最常用的数据库。我们这里将Django和MySQL连接。 在Linux终端下启动mysql: $mysql -u root -p 在MySQL中创立Django项目的数据库&#xff1a; …