element---tree树形结构(返回的数据与官方的不一样)

news2024/11/17 0:34:28

项目中要用到属性结构数据,后端返回的数据不是官方默认的数据结构:

		<el-tree
          :data="treeData"
          :filter-node-method="filterNode"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>

这是文档默认的树形数据结构:

data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }
      ]

后端返回回来的:

[
            {
                "id": "1399521221730304",
                "email": "123@qq.com",
                "child": [
                    {
                        "id": "1399659790548992",
                        "email": "1234@qq.com",
                        "child": [
                            {
                                "id": "1400165901697024",
                                "email": "fj@qq.com",
                                "child": [
                                    {
                                        "id": "1400671389548544",
                                        "email": "fjj@qq.com",
                                        "child": null
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "id": "1400156697001984",
                        "email": "277@qq.com",
                        "child": null
                    }
                ]
            },
            {
                "id": "1399527282712576",
                "email": "147852@qq.com",
                "child": null
            },
          ]

直接使用数据树形结构展示不出来,可以改变默认展示的数据格式:

defaultProps: {
    children: 'child',
    label: 'email'
  },

在这里插入图片描述

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

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

相关文章

Leetcode3071. 在矩阵上写出字母 Y 所需的最少操作次数

Every day a Leetcode 题目来源&#xff1a;3071. 在矩阵上写出字母 Y 所需的最少操作次数 解法1&#xff1a;模拟 统计 Y 中的元素出现次数&#xff0c;记到一个长为 3 的数组 cnt1 中。统计不在 Y 中的元素出现次数&#xff0c;记到一个长为 3 的数组 cnt2 中。 计算最多…

商业前端TS开发自动化工具

本期作者 一、背景 商业侧的业务比较复杂&#xff0c;B端项目中含有大量常量类的类型判断&#xff0c;且因历史原因&#xff0c;很多常量值前端无法直接知其含义&#xff0c;这既不利于新人的上手&#xff0c;也不利于项目的维护。 在开发协作上&#xff0c;前后端的API沟通&a…

unicloud 云数据库概念及创建一个云数据库表并添加记录(数据)

云数据库概念 uniCloud提供了一个 JSON 格式的文档型数据库。顾名思义&#xff0c;数据库中的每条记录都是一个 JSON 格式的文档。 它是 nosql 非关系型数据库&#xff0c;如果您之前熟悉 sql 关系型数据库&#xff0c;那么两者概念对应关系如下表&#xff1a; 关系型JSON 文…

小孩近视用白炽灯好吗?多款热门护眼台灯实测分享

如今对于家长而言&#xff0c;最关心的事情除了孩子的学习成绩以外&#xff0c;最重要的就是孩子的视力健康问题&#xff0c;现在的孩子近视率实在太高了&#xff0c;不少还在小学阶段的学生都开始配戴上了眼镜。所以想要保护孩子的视力健康一盏好的台灯肯定是必不可少的&#…

RabbitMQ入门到实战一篇文章就够了

RabbitMQ 课程内容 认识RabbitMQ安装RabbitMQSpringBoot使用RabbitMQ其他特性 一.RabbitMQ入门 1.RabbitMQ认识 1.1.RabbitMQ是什么 MQ全称为Message Queue&#xff0c;即消息队列. 它也是一个队列,遵循FIFO原则 。RabbitMQ是由erlang语言开发&#xff0c;基于AMQP&#…

德人合科技|天锐绿盾加密软件——数据防泄漏系统

德人合科技是一家专注于提供企业级信息安全解决方案的服务商&#xff0c;提供的天锐绿盾加密软件是一款专为企业设计的数据安全防护产品&#xff0c;主要用于解决企事业单位内部敏感数据的防泄密问题。 www.drhchina.com PC端&#xff1a; https://isite.baidu.com/site/wjz012…

Spring Boot 生成与解析Jwt

Spring Boot 生成与解析Jwt Maven依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version> </dependency>生成&解析 package yang;import io.jsonwebtoken.Claims…

神经网络(neural network)

在这一章中我们将进入深度学习算法&#xff0c;学习一些神经网络相关的知识&#xff0c;这些是有更加强大的作用&#xff0c;更加广泛的用途。 神经元和大脑(neurons and the brain): 我们对于我们的编程的进步主要来自我们对于大脑的研究&#xff0c;根据我们对于大脑的研究…

耐腐蚀PFA消解管可配四氟回流盖适配海能莱伯泰科全自动石墨消解仪

PFA消解管&#xff0c;也叫PFA消化管、特氟龙消解管、耐高温消解杯等&#xff0c;应用于气相、液相、等离子光谱质谱、原子吸收、原子荧光等化学分析方法的样品前处理&#xff0c;可消解重金属、农残、食品、淤泥、稀土、水产品、有机物等。 PFA消解管 PFA消解管可耐强酸、强碱…

【论文阅读】(2024.03.05-2024.03.15)论文阅读简单记录和汇总

(2024.03.05-2024.03.15)论文阅读简单记录和汇总 2024/03/05&#xff1a;随便简单写写&#xff0c;以后不会把太详细的记录在CSDN&#xff0c;有道的Markdown又感觉不好用。 目录 &#xff08;ICMM 2024&#xff09;Quality Scalable Video Coding Based on Neural Represent…

(2024.03.04)如何打包Android Studio项目?

一、引言 最近帮助很多从未谋面的小伙伴调试了一下AS的项目&#xff0c;调试完成后需要他们查看是否与当初需求一致&#xff0c;此时就需要将已完成的项目打包&#xff0c;即导出APK安装包&#xff0c;发送到他们的手机上就可以下载安装使用了。在这里一是分享给大家打包方法&…

Java项目:41 springboot大学生入学审核系统的设计与实现010

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本大学生入学审核系统管理员和学生。 管理员功能有个人中心&#xff0c;学生管理&#xff0c;学籍信息管理&#xff0c;入学办理管理等。 学…

实验1:查看CPU和内存,用机器指令和汇编指令编程

预备知识&#xff1a;Debug的使用 1.Debug&#xff1a; Debug时DOS、Windows都提供的实模式&#xff08;8086 方式&#xff09;程序的调试工具。 debug是Windows 16位或者32位机器上的一款调试工具。 也就是说&#xff0c;在WindowsXP及以前的机器上都有debug&#xff0c;直接…

【C++从0到王者】第五十二站:跳表

文章目录 一、什么是跳表二、skiplist的效率三、skiplist的实现 一、什么是跳表 skiplist本质上也是一种查找结构&#xff0c;用于解决算法中的查找问题&#xff0c;跟平衡搜索树和哈希表的价值是一样的&#xff0c;可以作为key或者key/value的查找模型。 skiplist&#xff0c;…

【PCIe】 PCIe 拓扑结构与分层结构

&#x1f525;博客主页&#xff1a;PannLZ 文章目录 PCIe拓扑结构PCIe分层结构 PCIe拓扑结构 计算机网络中的拓扑结构源于拓扑学(研究与大小、形状无关的点、线关系的方法)。 把网络中的计算机和通信设备抽象为一个点&#xff0c;把传输介质抽象为一条线&#xff0c;由点和线组…

HTTP请求响应详解 (HTTP请求数据格式,常见请求方式,后端响应参数)及Apifox(postman)使用方式

目录 一.HTTP协议 二.HTTP请求数据格式 请求方式 三.后端响应请求 基于SpringBoot响应数据 请求响应的参数类型 同一响应格式 四.Apifox(postman)使用方法 一.HTTP协议 HTTP&#xff08;Hypertext Transfer Protocol&#xff0c;超文本传输协议&#xff09;是一种用…

maven项目引入私有jar,并打包到java.jar中

私有jar存放位置 maven依赖 <dependency><groupId>com.hikvision.ga</groupId><artifactId>artemis-http-client</artifactId><version>1.1.10</version><scope>system</scope><systemPath>${project.basedir}/s…

JS实现chatgpt数据流式回复效果

最近高了一个简单chatgpt对话功功能&#xff0c;回复时希望流式回复&#xff0c;而不是直接显示结果&#xff0c;其实很简单&#xff0c;前端流式读取即可&#xff0c;后端SSE实现流式传输 前端用到fetch获取数据&#xff0c;然后利用reader读取 let requestId parseInt(Ma…

笛量智能加入飞桨技术伙伴计划,共同打造“AI+私域智慧运营”新模式

近日&#xff0c;上海笛量智能科技有限公司正式加入飞桨技术伙伴计划&#xff0c;双方将共同努力在私域运营机器人技术及生态建设做出贡献&#xff0c;致力打造“AI私域运营”智能化新模式&#xff0c;助力产业降本增效。 上海笛量智能科技有限公司 上海笛量智能科技有限公司&a…

6款ai写作一键生成,让你的文字脱颖而出

如今AI写作工具正逐渐走入我们的生活&#xff0c;成为我们写作的得力助手&#xff0c;它们通过分析大量的文本数据和机器学习算法&#xff0c;能够快速生成文章的大纲、段落结构等&#xff0c;从而帮助我们节省写作时间&#xff0c;提高写作效率。今天&#xff0c;我将为大家介…