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

在使用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.rhkb.cn/news/497022.html

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

相关文章

viva-bus 航空机票网站 Akamai3 分析

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 有相关问题请第一时间头像私信联系我删…

pyQT + OpenCV相关练习

一、设计思路 1、思路分析与设计 本段代码是一个使用 PyQt6 和 OpenCV 创建的图像处理应用程序。其主要功能是通过一个图形界面让用户对图片进行基本的图像处理操作&#xff0c;如灰度化、翻转、旋转、亮度与对比度调整&#xff0c;以及一些滤镜效果&#xff08;模糊、锐化、边…

【数据库初阶】Linux中库的基础操作

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; 数据库初阶 &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 亲爱的小伙伴们&#xff0c;大家好&#xff01;在这篇文章中&#xff0c;我们将深入浅出地为大家讲解 Linux…

Element Plus 日期时间选择器大于当天时间置灰

效果&#xff1a; 实现思路&#xff1a; 点击官方链接的日期时间选择器的属性查看&#xff0c;发现disabled-date属性 一个用来判断该日期是否被禁用的函数&#xff0c;接受一个 Date 对象作为参数。 应该返回一个 Boolean 值&#xff0c;即用函数返回布尔值。 前言 JavaScrip…

线性直流电流

电阻网络的等效 等效是指被化简的电阻网络与等效电阻具有相同的 u-i 关系 (即端口方程)&#xff0c;从而用等效电阻代替电阻网络之后&#xff0c;不 改变其余部分的电压和电流。 串联等效&#xff1a; 并联等效&#xff1a; 星角变换 若这两个三端网络是等效的&#xff0c;从任…

Java与SQL Server数据库连接的实践与要点

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;Java和SQL Server数据库交互是企业级应用开发中的重要环节。本文详细探讨了使用Java通过JDBC连接到SQL Server数据库的过程&#xff0c;包括加载驱动、建立连接、执行SQL语句、处理异常、资源管理、事务处理和连…

【Halcon】例程讲解:基于形状匹配与OCR的多图像处理(附图像、程序下载链接)

1. 开发需求 在参考图像中定义感兴趣区域&#xff08;ROI&#xff09;&#xff0c;用于形状匹配和文本识别。通过形状匹配找到图像中的目标对象位置。对齐多幅输入图像&#xff0c;使其与参考图像保持一致。在对齐后的图像上进行OCR识别&#xff0c;提取文本和数字信息。以循环…

从0入门自主空中机器人-2-2【无人机硬件选型-PX4篇】

1. 常用资料以及官方网站 无人机飞控PX4用户使用手册&#xff08;无人机基本设置、地面站使用教程、软硬件搭建等&#xff09;&#xff1a;https://docs.px4.io/main/en/ PX4固件开源地址&#xff1a;https://github.com/PX4/PX4-Autopilot 飞控硬件、数传模块、GPS、分电板等…

Artec Space Spider助力剑桥研究团队解码古代社会合作【沪敖3D】

挑战&#xff1a;考古学家需要一种安全的方法来呈现新出土的陶瓷容器&#xff0c;对比文物形状。 解决方案&#xff1a;Artec Space Spider, Artec Studio 效果&#xff1a;本项目是REVERSEACTION项目的一部分&#xff0c;旨在研究无国家社会中复杂的古代技术。研究团队在考古地…

IPv6 基础协议-NDP

IPv6 基础协议报文 何为基础协议&#xff1f;像v4中的icmp、arp、hdcp之类的 在v6中只需要NDP协议&#xff0c;他是通过ICMPv6报文完成的&#xff0c;她能够实现邻居发现、无状态地址检测、重复地址检测、PMTU等功能 RS&#xff08;133&#xff09;RA&#xff08;134&#x…

数据库原理及应用(MySQL版-李月军)-习题参考答案

数据库原理及应用&#xff08;MySQL版&#xff09;-微课视频版 习题参考答案 习 题一 一&#xff0e;选择题 1、D 2、C 3、C 4、B 5、D 6、B 7、A 8、B 9、C 10、A 11、B 12、C 13、①A②B③C 14、①E②B 15、①B②C③B 16、B 17、A 18、D 二&#xff0e;填空题 1、文件…

用Python开启人工智能之旅(四)深度学习的框架和使用方法

第四部分&#xff1a;深度学习的框架和使用方法 用Python开启人工智能之旅&#xff08;一&#xff09;Python简介与安装 用Python开启人工智能之旅&#xff08;二&#xff09;Python基础 用Python开启人工智能之旅&#xff08;三&#xff09;常用的机器学习算法与实现 用Pyt…

洛谷 P1725:琪露诺 ← 单调队列+DP

【题目来源】https://www.luogu.com.cn/problem/P1725【题目描述】 在幻想乡&#xff0c;琪露诺是以笨蛋闻名的冰之妖精。 某一天&#xff0c;琪露诺又在玩速冻青蛙&#xff0c;就是用冰把青蛙瞬间冻起来。但是这只青蛙比以往的要聪明许多&#xff0c;在琪露诺来之前就已经跑到…

win11永久修改pdf默认打开方式

电脑总是重启或过一阵子就自动修改pdf文件打开方式为浏览器打开&#xff0c;按照传统方式 右键→属性&#xff0c;修改打开方式&#xff0c;不好使 得用更根本的方法&#xff01;打开设置&#xff0c;找到 应用→默认应用 &#xff08;或者 "winR"打开运行&#xff0…

解密MQTT协议:从QOS到消息传递的全方位解析

1、QoS介绍 1.1、QoS简介 使用MQTT协议的设备大部分都是运行在网络受限的环境下&#xff0c;而只依靠底层的TCP传输协议&#xff0c;并不 能完全保证消息的可靠到达。 MQTT提供了QoS机制&#xff0c;其核心是设计了多种消息交互机制来提供不同的服务质量&#xff0c;来满足…

跨语言数据格式标准化在 HarmonyOS 开发中的实践

文章目录 前言数据格式标准化的意义数据传递中的痛点标准化的优势 JSON 与 Protocol Buffers 的比较JSONProtocol Buffers HarmonyOS 跨语言数据传递示例示例代码&#xff1a;定义 Protocol Buffers 消息格式生成 Java 和 C 代码示例代码&#xff1a;Java 端序列化与传递数据C …

IPsec VPN配置实验(固定地址)

目录 实验需求 基础配置 配置第一阶段 IKE SA 配置第二阶段 IPsec SA 测试结果 清除IKE / IPsec SA命令 注意 就是IPsec的实验配置的话&#xff0c;它们两端的IP地址是固定的 那么就用第一阶段的主模式&#xff08;Main Mode&#xff09; 和第二阶段的快速模式&#xf…

Bert中文文本分类

这是一个经典的文本分类问题&#xff0c;使用google的预训练模型BERT中文版bert-base-chinese来做中文文本分类。可以先在Huggingface上下载预训练模型备用。https://huggingface.co/google-bert/bert-base-chinese/tree/main 我使用的训练环境是 pip install torch2.0.0; pi…

SpringBoot的pom.xml文件中,scope标签有几种配置?

1.compile&#xff08;默认&#xff09; 含义&#xff1a;表示该依赖在项目的所有阶段&#xff08;编译、测试、运行&#xff09;都需要。 当你依赖一个库&#xff0c;并且这个库是你项目的核心部分&#xff0c;比如 Spring Boot 的spring - boot - starter - web&#xff0c…

FPGA三模冗余TMR工具(二)

学术和商业领域有许多自动化的三模冗余TMR工具&#xff0c;本文介绍当前主流的基于寄存器传输级的三模冗余工具&#xff08;Register-Transfer Level&#xff0c;RTL&#xff09;&#xff0c;基于重要软核资源的三模冗余工具&#xff0c;以及新兴的基于高层次综合的三模冗余工具…