树形查询转成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数组中。

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

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

相关文章

flask后端开发(11):User模型创建+注册页面模板渲染

目录 一、数据库创建和配置信息1.新建数据库2.数据库配置信息3.User表4.ORM迁移 二、注册页面模板渲染1.导入静态文件2.蓝图注册路由 一、数据库创建和配置信息 1.新建数据库 终端中 CREATE DATABASE zhiliaooa DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;2…

OpenAI 12天发布会:AI革命的里程碑@附35页PDF文件下载

在人工智能的浪潮中&#xff0c;OpenAI的12天发布会无疑是2024年科技界的一场盛宴。从12月5日开始&#xff0c;OpenAI连续12天每天发布一个新应用或功能&#xff0c;标志着AI技术的又一次飞跃。本文将梳理这些激动人心的发布&#xff0c;带你一探究竟。 OpenAI发布会概览 Ope…

使 el-input 内部的内容紧贴左边

<el-inputv-model"form.invitor"placeholder"PC端的自动取当前账号的手机号"readonlyclass"no-border-input" />::v-deep(.no-border-input .el-input__inner) { border: none; box-shadow: none; padding-left: 0; /* 确保内容紧贴左边 *…

(南京观海微电子)——GH7009开机黑屏案例分析

一、 现象描述&#xff1a; 不良现象: LVDS模组&#xff0c;开机大概2秒后就黑屏。 二、问题分析 等主机进入Kernel 后做以下测试&#xff1a; 1、手动reset LCM 后 可以显示正常&#xff1b; 总结&#xff1a; 1&#xff09;uboot 部分HS 太窄&#xff0c;仅有4个clk宽度&am…

科技云报到:人工智能时代“三大件”:生成式AI、数据、云服务

科技云报到原创。 就像自行车、手表和缝纫机是工业时代的“三大件”。生成式AI、数据、云服务正在成为智能时代的“新三大件”。加之全球人工智能新基建加速建设&#xff0c;成为了人类社会数字化迁徙的助推剂&#xff0c;让新三大件之间的耦合越来越紧密。从物理世界到数字世…

攻破 kioprix level 4 靶机

又又又来了... 法一、 基本步骤 1.确认主机ip&#xff0c;扫描端口确定服务和版本 2.访问网站&#xff0c;扫描目录&#xff0c;查找敏感信息 3.利用敏感信息和SQL注入进入网站 4.ssh服务连接主机 5.shell逃逸并查找敏感信息&#xff08;与数据库等相关&#xff09; 6.m…

20241130 RocketMQ本机安装与SpringBoot整合

目录 一、RocketMQ简介 ???1.1、核心概念 ???1.2、应用场景 ???1.3、架构设计 2、RocketMQ Server安装 3、RocketMQ可视化控制台安装与使用 4、SpringBoot整合RocketMQ实现消息发送和接收? ? ? ? ? 4.1、添加maven依赖 ???4.2、yaml配置 ???4.3、…

python报错ModuleNotFoundError: No module named ‘visdom‘

在用虚拟环境跑深度学习代码时&#xff0c;新建的环境一般会缺少一些库&#xff0c;而一般解决的方法就是直接conda install&#xff0c;但是我在conda install visdom之后&#xff0c;安装是没有任何报错的&#xff0c;conda list里面也有visdom的信息&#xff0c;但是再运行代…

玩转影刀AI Power-风景小助手教学

附上该教学网站影刀AI Power帮助文档 - 飞书云文档 影刀AI Power-风景小助手旅游景区大全通过集成AI技术&#xff0c;使得旅游信息的获取和旅游攻略的制定变得更加便捷和个性化&#xff0c;极大地提升了用户的旅游体验。 功能 影刀AI Power-风景小助手旅游景区大全是一款利用…

yolov5 yolov6 yolov7 yolov8 yolov9目标检测、目标分类 目标切割 性能对比

文章目录 YOLOv1-YOLOv8之间的对比如下表所示&#xff1a;一、YOLO算法的核心思想1. YOLO系列算法的步骤2. Backbone、Neck和Head 二、YOLO系列的算法1.1 模型介绍1.2 网络结构1.3 实现细节1.4 性能表现 2. YOLOv2&#xff08;2016&#xff09;2.1 改进部分2.2 网络结构 3. YOL…

电商平台能挡住恶意网络爬虫的攻击吗?

爬虫盗取电商数据的步骤 爬虫技术作为一种数据获取工具&#xff0c;正逐渐成为电商平台的一大隐患。网络爬虫不仅能够获取商家关键信息并滋生仿冒网站&#xff0c;还能收集用户敏感信息&#xff0c;对用户的财产安全和隐私造成严重威胁。同时&#xff0c;爬虫攻击还会扰乱正常…

蓝桥杯速成教程{三}(adc,i2c,uart)

目录 一、adc 原理图​编辑引脚配置 Adc通道使能配置 实例测试 ​编辑效果显示 案例程序 badc 按键相关函数 测量频率占空比 main 按键的过程 显示界面的过程 二、IIC通信-eeprom 原理图AT24C02 引脚配置 不可用状态&#xff0c;用的软件IIC 官方库移植 At24c02手册 ​编辑…

小米汽车加速出海,官网建设引领海外市场布局!

面对国内市场的饱和态势&#xff0c;中国企业出海步伐纷纷加速&#xff0c;小米也是其中的一员。Canalys数据显示&#xff0c;2024年第三季度&#xff0c;小米以13.8%的市场份额占比&#xff0c;实现了连续17个季度位居全球前三的成绩。 据“36 氪汽车”报道&#xff0c;小米汽…

Windows中安装Python3

Windows中安装Python3 1. 下载Python安装包 首先&#xff0c;访问Python的官方网站 Python.org&#xff0c;选择适合你Windows版本的Python安装包。 2. 运行安装包 下载完成.exe文件后&#xff0c;双击运行安装包。在安装过程中&#xff0c;有一些关键的选项需要特别注意&a…

从零搭建SpringBoot3+Vue3前后端分离项目基座,中小项目可用

文章目录 1. 后端项目搭建 1.1 环境准备1.2 数据表准备1.3 SpringBoot3项目创建1.4 MySql环境整合&#xff0c;使用druid连接池1.5 整合mybatis-plus 1.5.1 引入mybatis-plus1.5.2 配置代码生成器1.5.3 配置分页插件 1.6 整合swagger3&#xff08;knife4j&#xff09; 1.6.1 整…

支持最新 mysql9的workbench8.0.39 中文汉化教程来了

之前在 B 站上发布了 mysql8 workbench 汉化教程&#xff0c;一年多来帮助很多初学者解决了不熟悉英文的烦恼。 汉化视频可以访问&#xff1a; 2024最新版mysql8.0.39中文版mysql workbench汉化 中文升级 旧版汉化报错解决_哔哩哔哩_bilibili MySql Workbench汉化_哔哩哔哩_…

JavaWeb期末复习

目录 学习通题目Web技术与应用&#xff08;2024秋&#xff09;第二章 绪论课前测试一.选择题二.填空题 课后巩固 第三章 HTML基础课前测试一.单选题二.填空题 课后巩固一.单选题二.填空题 第四章 CSS课前测试二.单选题三.填空题 4.5 浮动与清理一.单选题 课后巩固二.单选题 第五…

云手机与Temu矩阵:跨境电商运营新引擎

云手机与 Temu 矩阵结合的基础 云手机技术原理 云手机基于先进的 ARM 虚拟化技术&#xff0c;在服务器端运行 APP。通过在服务器上利用容器虚拟化软件技术&#xff0c;能够虚拟出多个独立的手机操作系统实例&#xff0c;每个实例等同于一部单独的手机&#xff0c;可独立运行各…

【每日学点鸿蒙知识】Text填充父控件、Native接收数组、js逻辑不执行问题、UIAbility上下文问题、页面跳转路由栈

1、HarmonyOS 如何使Text组件填充满父组件&#xff1f; build() {Row() {Row() {Text(this.str).constraintSize({ maxWidth: 100%, minHeight: "30vp" }).backgroundColor(Color.Gray).fontSize(24vp)}.key(row1).constraintSize({ maxWidth: 100%}).backgroundCol…

Sqoop的使用

每个人的生活都是一个世界&#xff0c;即使最平凡的人也要为他那个世界的存在而战斗。 ——《平凡的世界》 目录 一、sqoop简介 1.1 导入流程 1.2 导出流程 二、使用sqoop 2.1 sqoop的常用参数 2.2 连接参数列表 2.3 操作hive表参数 2.4 其它参数 三、sqoop应用 - 导入…