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

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

		<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'
  },

在这里插入图片描述

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

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

相关文章

零、自然语言处理开篇

目录 0、NLP任务的基础——符号向量化 0.0 词袋模型 0.1 查表/One-hot编码 0.2 词嵌入模型/预训练模型 0.2.0 Word2Vec &#xff08;0&#xff09;CBOW &#xff08;1&#xff09;Skip-gram 0.2.1 GloVe 0.2.2 WordPiece 0.2.3 BERT 0.2.4 ERNIE NLP自然语言处理&am…

投放项目到github仓库(代码集合)

1 假设你的项目文件夹为Project1 &#xff0c;那么代开Project1后 右键选择打开Git Bash 2输入初始化本地仓库 git init 3输入git add . (.表示全部&#xff0c;当然也可以部分选取&#xff0c;请自行百度) 4输入 git remote add origin https://github.com/********.git(网…

GitHub和Gitee的基本使用和在IDEA中的集成

文章目录 【1】GitHub1.创建仓库2.增加和修改文件3.创建分支4.删除仓库5.远程仓库下载到本地 【2】Gitee1.创建仓库2.远程仓库下载到本地. 【3】IDEA集成GitHub【4】IDEA集成Gitee1.在Gitee中修改&#xff0c;同步到本地2.从Gitee中下载项目 【1】GitHub 1.创建仓库 先登陆这…

LeetCode每日一题之 寻找数组中心下标

题目介绍&#xff1a; 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 算法原理: 这道题仍然可以使用前缀和的思想来求解&#xff0c;不理解基础前缀和模板的可以看我前面的博客&#xff0c;上图中0-2号位元素的和可以很好地用前缀和数组求出&#xff0c;而后…

系统安全保证措施-word

【系统安全保证措施-各支撑材料直接套用】 一、 身份鉴别 二、 访问控制 三、 通信完整性、保密性 四、 抗抵赖 五、 数据完整性 六、 数据保密性 七、 应用安全支撑系统设计 软件全套资料下载进主页。

智慧公厕系统的运作过程

智慧公厕是一种新型的未来城市公共厕所&#xff0c;通过物联网、互联网、大数据、云计算、自动化控制等技术&#xff0c;实现公共厕所使用、运营、管理、养护的全过程全方位信息化。 那么&#xff0c;智慧公厕是如何运作的&#xff1f;智慧公厕的运作过程包括什么技术&#xf…

广度优先搜索和深度优先搜索

广度优先搜索 广度优先搜索&#xff08;Breadth-First-Search&#xff0c;BFS&#xff09;类似于二叉树的层序遍历算法&#xff08;借助队列&#xff09;&#xff0c;其基本思想是&#xff1a;首先访问起始顶点&#xff0c;接着由v出发&#xff0c;依次访问v的各个未访问过的邻…

【LeetCode: 212. 单词搜索 II - dfs】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

基于SSM框架的商场导视系统设计与实现

目 录 摘 要 1 Abstract 2 引 言 3 1 系统开发相关技术 5 1.1 框架技术 5 1.1.1Spring框架 5 1.1.2Mybatis框架 5 1.1.3SpringMVC框架 6 1.2 MySQL数据库 7 1.3前端技术 7 1.3.1ECharts图表技术 7 1.3.2bookstorp框架技术 8 1.4 本章小结 8 2 系统需求分析 9 2.1 系统需求实现…

ThreadLocal源码分析

简介 ThreadLocal是JDK提供的&#xff0c;支持线程本地变量。也就是说&#xff0c;如果我们创建了一个ThreadLocal变量&#xff0c;则访问这个变量的每个线程都会有这个变量的一个本地副本。如果多个线程同时对这个变量进行读写操作时&#xff0c;实际上操作的是线程自己本地内…

内存映射实现父子进程通信

创建内存映射区&#xff1a; void *mmap(void *addr ,size_t length,int prot,int flags,int fd,off_t offset); 参数&#xff1a; addr 指定映射区的首地址。通常NULL&#xff0c;表示让系统自动分配length 共享内存映射区的长度prot 共享内存的读写属性 PROT_READ PR…

电脑资料管理软件(5个高效批量管理电脑资料的方法)

企业电脑资料管理是企业一大难题&#xff0c;为什么这样说&#xff1f; 首先&#xff0c;企业电脑资料的数量庞大且种类繁多。 其次&#xff0c;电脑资料的安全性和保密性要求高。 再者&#xff0c;电脑资料的管理涉及到多个部门和员工的协作。 ...... 针对此类情况很多企业…

基于深度视觉实现机械臂对目标的识别与定位

机械臂手眼标定 根据相机和机械臂的安装方式不同&#xff0c;手眼标定分为眼在手上和眼在手外两种方式&#xff0c;双臂机器人的相机和机械臂基座的相对位置固定&#xff0c;所以应该采用眼在手外的手眼标定方式。 后续的视觉引导机械臂抓取测试实验基于本实验实现&#xf…

Chatgpt异常10秒恢复大法--亲测有效

Chatgpt异常10秒恢复大法--亲测有效! 这几天有没有朋友GPT界面正常&#xff0c;打字不回复?各种恼(我本人)今天偶然看到群友讨论&#xff0c;10秒钟恢复了! 极简步骤:Chorme界面按F12--应用--存储--清楚缓存搞定! 更多资料&#xff1a; 极简步骤:Chorme界面按F12--应用--存储-…

GSM8K数据集分享

来源: AINLPer公众号&#xff08;每日干货分享&#xff01;&#xff01;&#xff09; 编辑: ShuYini 校稿: ShuYini 时间: 2024-3-3 先进的语言模型可以在许多任务上与人类表现相媲美&#xff0c;但它们仍然难以执行多步骤数学推理任务。为此OpenAI团队创建了一个高质量、语言多…

Centos安装Jenkins

1、更新系统 &#xff08;1&#xff09;更新下系统 sudo yum -y update 安装用于下载java 17二进制文件的wget命令行工具 sudo yum -y install wget vim 2、卸载centos自带的jdk 由于我们安装的版本比较高&#xff0c;需要jdk17&#xff0c;卸载centos自带的jdk。用 下面的…

阿里云DSW做AI绘画时的显卡选择A10?V100?

V100是Volta架构&#xff0c;A10是Ampere架构&#xff0c;架构上讲A10先进点&#xff0c;其实只是制程区别&#xff0c;用起来没区别。 V100是HBM的内存读取&#xff0c;带宽大&#xff0c;但是DDR5的。 二块卡都是全精度为主的算力卡&#xff0c;半精度优势不明显。 需要用…

3/7—21. 合并两个有序链表

代码实现&#xff1a; 方法1&#xff1a;递归 ---->难点 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* mergeTwoLists(struct ListNode *list1, struct ListNode *list2) {/*1.如果l1为…

前端知识点、技巧、webpack、性能优化(持续更新~)

1、 请求太多 页面加载慢 &#xff08;webpack性能优化&#xff09; 可以把 图片转换成 base64 放在src里面 减少服务器请求 但是图片会稍微大一点点 以上的方法不需要一个一个自己转化 可以在webpack 进行 性能优化 &#xff08;官网有详细描述&#xff09;

Yolov8有效涨点,添加多种注意力机制,修改损失函数提高目标检测准确率

目录 简介 CBAM注意力机制原理及代码实现 原理 代码实现 GAM注意力机制 原理 代码实现 修改损失函数 YAML文件 完整代码 &#x1f680;&#x1f680;&#x1f680;订阅专栏&#xff0c;更新及时查看不迷路&#x1f680;&#x1f680;&#x1f680; http://t.csdnimg.c…