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.mfbz.cn/a/249448.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Arduino下载、安装及配置(含中文配置步骤)

Arduino下载 官网下载 官网链接---------> Arduino - Home 网盘下载 链接:https://pan.baidu.com/s/1In38y8pinjCL0DEGjRHVTQ?pwdJAYU 提取码:JAYU Arduino安装 直接下一步下一步就行(如果不想放在C盘,那就改…

师兄啊师兄第二季开播:男主成海神?玄机是懂联动的!

《师兄啊师兄》动画第二季在12月14日终于正式开播,首播两集,还是很有诚意的。 这部动画改编自言归正传的小说《我师兄实在太稳健了》,原著的知名度不算很高,但玄机制作的动画让这个IP火出了圈。 动画第一季就凭借高颜值的人物建模…

qemu 虚拟机

文章目录 一、参考资料二、QEMU调试参数三、QEMU 命令 一、参考资料 # 查询 qemu 包 apt list | grep qemu# 查询已安装的 qemu 包 apt list --installed | grep qemu # 查询 qemu 版本 qemu-img -V # 安装 sudo apt-get install qemu-system-arm qemu-system-mips qemu-syste…

简洁高效的 NLP 入门指南: 200 行实现 Bert 文本分类 (TensorFlow 版)

简洁高效的 NLP 入门指南: 200 行实现 Bert 文本分类 TensorFlow 版 概述NLP 的不同任务Bert 概述MLM 任务 (Masked Language Modeling)TokenizeMLM 的工作原理为什么使用 MLM NSP 任务 (Next Sentence Prediction)NSP 任务的工作原理NSP 任务栗子NSP 任务的调整和局限性 安装和…

YOLOv8重要文件解读

🍨 本文为[🔗365天深度学习训练营学习记录博客 🍦 参考文章:365天深度学习训练营 🍖 原作者:[K同学啊 | 接辅导、项目定制] 🚀 文章来源:[K同学的学习圈子](https://www.yuque.com/m…

js输入框部分内容不可编辑,其余正常输入,el-input和el-select输入框和多个下拉框联动后的内容不可修改

<tr>//格式// required自定义指令<e-td :required"!read" label><span>地区&#xff1a;</span></e-td><td>//v-if"!read && this.data.nationCode 148"显示逻辑<divclass"table-cell-flex"sty…

【CASS精品教程】cass11提示“请不要在虚拟机中运行此程序”的解决办法

文章目录 一、问题提示二、解决办法一、问题提示 按照正常安装教程安装好南方测绘cass 11之后,打开的时候可能会有以下提示:请不要在虚拟机中运行此程序,如下图所示: 遇到问题,咱们就想办法解决问题,下面将自己尝试的方法及最终解决情况跟大家说一下,供参考。 二、解决…

基于ssm图书商城网站的设计和开发论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本图书商城网站就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…

【JavaEE】锁的策略

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…

[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…

【AI工具】GitHub Copilot IDEA安装与使用

GitHub Copilot是一款AI编程助手&#xff0c;它可以帮助开发者编写代码&#xff0c;提供代码建议和自动完成功能。以下是GitHub Copilot在IDEA中的安装和使用步骤&#xff1a; 安装步骤&#xff1a; 打开IDEA&#xff0c;点击File -> Settings -> Plugins。在搜索框中输…

phpstudy是什么?

PHPStudy 是一个集成环境工具&#xff0c;它将 PHP 开发所需的软件&#xff0c;如 Apache&#xff08;Web服务器&#xff09;、MySQL&#xff08;数据库服务器&#xff09;、PHP&#xff08;脚本语言&#xff09;等打包在一起&#xff0c;以便用户能够轻松安装和配置这些软件&a…

【第1期】SpringSecurity基于角色和权限的细粒度接口权限控制

SpringSecurity 细粒度权限控制 一、Role 和 Authority的区别 角色用来表示某一类权限的集合&#xff0c;权限粒度更小&#xff0c;方便细粒度控制 二、创建用户、角色、权限相关表&#xff1a; CREATE TABLE common_user (id bigint(20) NOT NULL COMMENT 主键id,login_na…

详细教程 - 从零开发 鸿蒙harmonyOS应用 第四节 (鸿蒙Stage模型 登录页面 ArkTS版 推荐使用)

在鸿蒙OS中&#xff0c;Ability是应用程序提供的抽象功能&#xff0c;可以理解为一种功能。在应用程序中&#xff0c;一个页面即一种能力&#xff0c;如登录页面&#xff0c;即具有登录功能的能力。以下是对鸿蒙新建项目的登录代码功能的详细解读和工作流程的描述&#xff1a; …

人工智能在红斑狼疮应用主要以下4个方面

人工智能&#xff08;Artificial Intelligence, AI&#xff09;在医学领域的应用已取得了一定的进展。红斑狼疮&#xff08;Systemic Lupus Erythematosus, SLE&#xff09;是一种免疫系统性疾病&#xff0c;对该疾病进行诊断和治疗是一个复杂的过程。人工智能可以发挥作用&…

棒材生产线的7大智能化提升方向 蓝鹏可定制3大类

轧钢智能化控制体系&#xff0c;实行智能化轧钢&#xff0c;提高产品合格率&#xff0c;满足棒材生产线对于产品精度、生产产量、远程集中操控的需求&#xff0c;是钢厂一直致力于实现的目标&#xff0c;目前可从七大方向对棒材产线的智能化方向进行提升。 棒材生产线有以下智…

CRM客户管理系统-超详细介绍

1. CRM概述 CRM&#xff08;Customer Relationship Management&#xff09;客户关系管理&#xff0c;是一种以客户为中心&#xff0c;通过与客户建立持久的、互惠互利的合作关系&#xff0c;从而提高企业整体绩效的管理方法。CRM系统是支持CRM战略的软件工具&#xff0c;用于…

用Pyinstaller打包深度学习算法为独立的可执行程序

前言&#xff1a;随着深度学习算法的流行&#xff0c;在传统工业软件计算领域&#xff0c;传统算法逐渐被深度学习算法给代替&#xff0c;但由于基于python的深度学习算法十分依赖python环境以及例如Pytorch、Scikit-learning、Keras等机器学习库&#xff0c;将深度学习算法运用…

HarmonyOS4.0从零开始的开发教程17给您的应用添加通知

HarmonyOS&#xff08;十五&#xff09;给您的应用添加通知 通知介绍 通知旨在让用户以合适的方式及时获得有用的新消息&#xff0c;帮助用户高效地处理任务。应用可以通过通知接口发送通知消息&#xff0c;用户可以通过通知栏查看通知内容&#xff0c;也可以点击通知来打开应…

linux 查看服务启动时间

文章目录 linux 查看服务启动时间参数解析 linux 查看服务启动时间 [root104 ~]# ps -o lstart -p ps -ef |grep -v grep |grep "zookeeper"|awk {print$2}STARTED Fri Dec 15 16:54:10 2023参数解析 linux 命令中 ps -ef 详解 ps -ef表示查看全格式的进程。 ps …
最新文章