树形查询转成TreeNode[],添加新节点

news2025/1/2 21:31:17

在使用PrimeVue的TreeTable组件时,需要将带有层级的数据转换为TreeNode[]类型的数据结构。TreeNode是PrimeVue中定义的一个接口,用于表示树节点。通常,带有层级的数据是一个嵌套的对象或数组,其中每个对象可能包含子对象,形成树状结构。

以下是一个将带有层级的数据转换为TreeNode[]的示例方法:

假设你的数据结构如下:

const data = [
  {
    id: 1,
    name: 'Node 1',
    children: [
      {
        id: 2,
        name: 'Node 1.1',
        children: [
          {
            id: 3,
            name: 'Node 1.1.1'
          }
        ]
      },
      {
        id: 4,
        name: 'Node 1.2'
      }
    ]
  },
  {
    id: 5,
    name: 'Node 2'
  }
];

你可以使用递归函数将其转换为TreeNode[]:

function convertToTreeNode(data) {
  return data.map(item => {
    const node: TreeNode = {
      data: item,
      children: item.children? convertToTreeNode(item.children) : []
    };
    return node;
  });
}

const treeNodes = convertToTreeNode(data);

在这个示例中,convertToTreeNode函数接受一个带有层级的数据对象,并返回一个TreeNode[]类型的数组。每个TreeNode对象包含一个data属性,用于存储原始数据对象,以及一个children属性,用于存储子节点的TreeNode对象。

转换后的数据可以直接用于PrimeVue的TreeTable组件:

<template>
  <TreeTable :value="treeNodes">
    <Column field="name" header="Name"></Column>
  </TreeTable>
</template>

<script>
import { TreeTable, Column } from 'primevue/treetable';
import { TreeNode } from 'primevue/api';

export default {
  components: {
    TreeTable,
    Column
  },
  data() {
    return {
      treeNodes: []
    };
  },
  mounted() {
    // 假设你的数据已经通过API获取并存储在data变量中
    const data = [
      // 数据结构同上
    ];
    this.treeNodes = convertToTreeNode(data);
  },
  methods: {
    convertToTreeNode(data) {
      // 转换函数同上
    }
  }
};
</script>

这样,你就可以在TreeTable组件中显示带有层级的数据了。

以下是在JavaScript中为Node 2添加一个子节点的示例代码:

// 假设这是原始数据结构
const data = [
    {
        id: 1,
        name: 'Node 1',
        children: [
            {
                id: 2,
                name: 'Node 1.1',
                children: [
                    {
                        id: 3,
                        name: 'Node 1.1.1'
                    }
                ]
            },
            {
                id: 4,
                name: 'Node 1.2'
            }
        ]
    },
    {
        id: 5,
        name: 'Node 2'
    }
];

// 找到Node 2对象
const node2 = data.find((node) => node.id === 5);

// 创建新的子节点
const newChild = {
    id: 6,
    name: 'Node 2.1'
};

// 如果Node 2还没有children属性,则创建一个空数组并添加新子节点
if (!node2.children) {
    node2.children = [];
}
node2.children.push(newChild);

console.log(data);

在上述代码中:

  1. 首先使用find方法在数据结构中找到id5(即Node 2)的对象。

  2. 然后创建了一个新的子节点对象。

  3. 接着检查Node 2是否已经有children属性,如果没有则创建一个空数组。

  4. 最后将新子节点添加到Node 2children数组中。

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

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

相关文章

嵌入式单片机窗口看门狗控制与实现

窗口看门狗 注意:WWDG外设没有独立的时钟源,而是挂载在APB1总线下,APB1总线外设时钟为42MHZ。 了解WWDG外设的使用流程,可以参考stm32f4xx_wwdg.c的开头注释,具体流程如下图所示

从 ELK Stack 到简单 — Elastic Cloud Serverless 上的 Elastic 可观察性

作者&#xff1a;来自 Elastic Bahubali Shetti, Chris DiStasio 宣布 Elastic Cloud Serverless 上的 Elastic Observability 正式发布 — 一款完全托管的可观察性解决方案。 随着组织规模的扩大&#xff0c;一个能够处理分布式云环境的复杂性并提供实时洞察的可观察性解决方…

【教程】通过Docker运行AnythingLLM

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 官方教程&#xff1a;Local Docker Installation ~ AnythingLLM 1、先创建一个目录用于保存anythingllm的持久化文件&#xff1a; sudo mkdir /app su…

RabbitMQ基础篇之快速入门

文章目录 一、目标需求二、RabbitMQ 控制台操作步骤1.创建队列2.交换机概述3.向交换机发送消息4.结果分析5.消息丢失原因 三、绑定交换机与队列四、测试消息发送五、消息查看六、结论 一、目标需求 新建队列&#xff1a;创建 hello.queue1 和 hello.queue2 两个队列。消息发送…

Lottie动画源码解析

Lottie是一个很成熟的开源动画框架&#xff0c;它支持直接使用从AE导出的动画文件&#xff0c;在不同平台均可快速使用&#xff0c;大大减轻了程序员的工作量&#xff0c;也让复杂的动画成为可能。该动画文件使用Json格式来描述内容&#xff0c;可以大大缩减文件的体积。在Andr…

手机发烫怎么解决?

在当今这个智能手机不离手的时代&#xff0c;手机发烫成了不少人头疼的问题。手机发烫不仅影响使用手感&#xff0c;长期过热还可能损害手机硬件、缩短电池寿命&#xff0c;甚至引发安全隐患。不过别担心&#xff0c;下面这些方法能帮你有效给手机 “降温”。 一、使用习惯方面…

win10、win11-鼠标右键还原、暂停更新

系统优化 win 10jihuo win 11jihuo鼠标右键还原暂停更新 update 2024.12.28win 10 jihuo winx&#xff0c;打开powershell管理员&#xff0c;输入以下命令,选择1并等待 irm https://get.activated.win | iex参考&#xff1a;https://www.bilibili.com/video/BV1TN411M72J/?sp…

Android 学习小记1

目录 先介绍一下Android Studio 看看常见的模板 1. No Activity 2. Empty Activity 3. Gemini API Starter 4. Basic View Activity 5. Bottom Navigation Activity 6. Empty Views Activity 7. Navigation Drawer Views Activity 8. Responsive Views Activity 9. G…

uniapp使用ucharts组件

1.ucharts准备 有两种使用方式&#xff1a;一种是在uni的插件市场下载&#xff08;组件化开发&#xff09;。一种是手动引入ucharts包。官方都封装好组件了&#xff0c;我们不用岂不是浪费。 直接去dcloud插件市场&#xff08;DCloud 插件市场&#xff09;找&#xff0c;第一…

mybatis-plus自动填充时间的配置类实现

mybatis-plus自动填充时间的配置类实现 在实际操作过程中&#xff0c;我们并不希望创建时间、修改时间这些来手动进行&#xff0c;而是希望通过自动化来完成&#xff0c;而mybatis-plus则也提供了自动填充功能来实现这一操作&#xff0c;接下来&#xff0c;就来了解一下mybatis…

一、Hadoop概述

文章目录 一、Hadoop是什么二、Hadoop发展历史三、Hadoop三大发行版本1. Apache Hadoop2. Cloudera Hadoop3. Hortonworks Hadoop 四、Hadoop优势1. 高可靠性2. 高扩展性3. 高效性4. 高容错性 五、Hadoop 组成1. Hadoop1.x、2.x、3.x区别2. HDFS 架构概述3. YARN 架构概述4. Ma…

深度学习笔记(9)——神经网络和反向传播

神经网络和反向传播 神经网络架构&#xff1a; 更多的神经元,更大的模型容量,使用更强的正则化进行约束。 神经网络的分层计算 f W 2 m a x ( 0 , W 1 x b 1 ) b 2 fW_2max(0,W_1xb_1)b_2 fW2​max(0,W1​xb1​)b2​,其中max函数体现了非线性,如果想要加深网络的层次,必须…

大模型辅助测试的正确打开方式?

测试的基本目的之一&#xff0c;是对被测对象进行质量评估。换言之&#xff0c;是要提供关于被测对象质量的“确定性”。因此&#xff0c;我们很忌讳在测试设计中引入“不确定性”&#xff0c;比如采用不可靠的测试工具、自动化测试代码逻辑复杂易错、测试选择假设过于主观等等…

ipad如何直连主机(Moonlight Sunshine)

Windows 被连接主机&#xff08;Windows&#xff09; 要使用的话需要固定ip&#xff0c;不然ip会换来换去&#xff0c;固定ip方法本人博客有记载Github下载Sunshine Sunshine下载地址除了安装路径需要改一下&#xff0c;其他一路点安装完成后会打开Sunshine的Web UI&#xff…

sentinel集成nacos启动报[check-update] get changed dataId error, code: 403错误排查及解决

整合nacos报403错误 因为平台写的一个限流代码逻辑有问题&#xff0c;所以准备使用sentinel来限流。平台依赖里面已经引入了&#xff0c;之前也测试过&#xff0c;把sentinel关于nacos的配置加上后&#xff0c;启动一直输出403错误 [fixed-10.0.20.188_8848-test] [check-upda…

紫光同创-盘古200pro+开发板

本原创文章由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处&#xff08;www.meyesemi.com) 一、开发系统介绍 开发系统概述 MES2L676-200HP 开发板采用紫光同创 logos2 系列 FPGA&#xff0c;型号&#xff1a;…

Vue开发环境搭建上篇:安装NVM和NPM(cpnm、pnpm)

文章目录 引言I 安装NVM1.1 Windows系统安装NVM,实现Node.js多版本管理1.2 配置下载镜像1.3 NVM常用操作命令II NPM永久使用淘宝源安装 cnpm安装pnpm【推荐】see also: vscode常用插件引言 淘宝镜像:http://npm.taobao.org 和 http://registry.npm.taobao.org 已在 2022.06.3…

【AI大模型】探索GPT模型的奥秘:引领自然语言处理的新纪元

目录 &#x1f354; GPT介绍 &#x1f354; GPT的架构 &#x1f354; GPT训练过程 3.1 无监督的预训练语言模型 3.2 有监督的下游任务fine-tunning &#x1f354; 小结 学习目标 了解什么是GPT.掌握GPT的架构.掌握GPT的预训练任务. &#x1f354; GPT介绍 GPT是OpenAI公…

正则表达式(三剑客之sed)

1.sed工具的使用 1.1 sed工具 1&#xff09;命令格式&#xff1a;sed -n ‘n’ p filename 1.2 打印某行 1&#xff09;打印第二行 [rootlocalhost ~]# sed -n 2p /etc/passwd 2&#xff09;第二行重复打印 [rootlocalhost ~]# sed 2p /etc/passwd 3&#xff09;所有行全部…

细说STM32F407单片机IIC总线基础知识

目录 一、 I2C总线结构 1、I2C总线的特点 2、I2C总线通信协议 3、 STM32F407的I2C接口 二、 I2C的HAL驱动程序 1、 I2C接口的初始化 2、阻塞式数据传输 &#xff08;1&#xff09;函数HAL_I2C_IsDeviceReady() &#xff08;2&#xff09;主设备发送和接收数据 &#…