Vue tree树状结构数据转扁平数据

//数据结构可参考饿了么UItreeData: [{id: 1,label: 'Level one 1',type: 1,children: [{id: 4,label: 'Level two 1-1',type: 2,children: [{id: 9,label: 'Level three 1-1-1',type: 3}, {id: 10,label: 'Level three 1-1-2',type: 3}]}, {id: 11,label: 'Level three 1-2',type: 2,children: [{id: 12,label: 'Level three 1-2-1',type: 3}, {id: 13,label: 'Level three 1-2-2',type: 3}, {id: 14,label: 'Level three 1-2-3',type: 3}, {id: 15,label: 'Level three 1-2-4',type: 3}]}]}]
//转结构(list就是你要转的树状数据)treeToList(list) {let res = []for (const item of list) {const { children, ...i } = itemif (children && children.length) {res = res.concat(this.treeToList(children))}res.push(i)}return res}
//查看数据是否转换成功const treeList = this.treeToList(this.treeData)console.log('树状结构转扁平结构', treeList)   

参考文档Vue tree树状结构数据转扁平数据_vue树形结构转化为平行结构-CSDN博客

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

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

相关文章

查看kafka消息消费堆积情况

查看主题命令 展示topic列表 ./kafka-topics.sh --list --zookeeper zookeeper_ip:2181描述topic ./kafka-topics.sh --describe --zookeeper zookeeper_ip:2181 --topic topic_name查看topic某分区偏移量最大(小)值 ./kafka-run-class.sh kafka.too…

2024-3-6 python列表的切片赋值

切片赋值 如果把切片放在赋值语句的左边,或把它作为del操作的对象,我们就可以对序列进行嫁接、切除 或就地修改操作。 >>> l [i for i in range(20)] >>> l [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 1…

小白如何快速入门计算机视觉?

去年 11 月的时候,给自己了一个目标,希望在未来的 3个月时间里,写满100篇关于从零入门AI视觉的算法、代码文字。 历经 3 个月,终于在今天 100 篇文章写完了,代码也全部调试完成,上传到 github 上开源给大家…

旧物回收小程序开发:环保与科技的创新结合

随着科技的飞速发展,我们的日常生活越来越离不开手机应用程序。而在环保日益成为社会焦点的今天,如何将科技与环保相结合,成为了一个值得深思的问题。今天,我们将探讨旧物回收小程序的开发,它如何助力环保,…

【重要公告】BSV区块链上线TypeScript SDK,未来将支持更多开发语言

​​发表时间:2024年2月21日 BSV区块链协会宣布上线JavaScript和TypeScript SDK(即“标准开发工具包”)。TypeScript SDK旨在为开发者提供新版统一核心代码库,以便利开发者在BSV区块链上开发能够任意扩容的应用程序。新上线的SDK替…

SpringBoot集成自然语言处理hanlp工具包

HanLP是一系列模型与算法组成的NLP工具包&#xff0c;目标是普及自然语言处理在生产环境中的应用。 下载与配置 <dependency><groupId>com.hankcs</groupId><artifactId>hanlp</artifactId><version>portable-1.8.4</version> <…

掌握Python操作Word:从基础到高级全覆盖

掌握Python操作Word&#xff1a;从基础到高级全覆盖 引言Python操作Word的基础文档的创建与打开文档的基本操作 创建和打开Word文档创建新的Word文档打开现有文档读取文档内容修改现有文档 编辑文档内容添加和编辑文本设置格式插入标题 处理文档结构操作段落列表的处理表格的操…

深入理解 Vuex:从基础到应用场景

前言 在之前的文章中&#xff0c;我们已经对 Vue.js 有了一定的了解。今天我们要对Vue官方的状态共享管理器Vuex进行详细讲解&#xff0c;将其基本吃透&#xff0c;目标是面对大多数业务需求&#xff1b; 一、介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用…

『操作系统OS笔记』MAC(m1芯片)电脑安装FFmpeg

MAC(m1芯片)电脑安装FFmpeg mac电脑安装ffmpeg两种方法 文章目录 1. brew安装FFmpeg2. 官网下载FFmpeg压缩包3. 使用FFmpeg将音频和视频合并 1. brew安装FFmpeg brew install ffmpeg # 需要等比较久的时间&#xff0c;安装很多东西&#xff0c;安装过程中如果遇到报错对应解决…

MES数据采集设备

在智能制造日益盛行的今天&#xff0c;MES&#xff08;制造执行系统&#xff09;作为连接计划与生产现场的关键环节&#xff0c;其重要性不言而喻。而MES数据采集设备则是MES系统的核心组件&#xff0c;负责实时、准确地获取生产现场的各种数据&#xff0c;为企业的生产决策提供…

信息系统项目管理师--范围管理

项⽬范围管理 产品范围&#xff1a;指某项产品、服务或成果所具有的特征和功能。产品范围的完成情况是根据产品需求来衡量的。“需求”是指根据特定协议或其他强制性规范&#xff0c;产品、服务或成果 必须具备的条件或能⼒。 项⽬范围&#xff1a;包括产品范围&#xff0c;是为…

bat转exe

新建bat2exe.bat文件 ;echo off ;Title Converting batch scripts to file.exe with iexpress ;Mode 75,3 & color 0A ;Rem Original Script https://github.com/npocmaka/batch.scripts/edit/master/hybrids/iexpress/bat2exeIEXP.bat ;echo( ;if "%~1" equ &q…

探索HTTP/2

文章目录 http/1.1http/2疑惑 探索1. 连接前言2. 帧结构2.1 帧类型 Type 3. 帧详情3.1 SETTINGS 帧3.2 WINDOW_UPDATE 帧3.3 PRIORITY 帧3.4 HEADERS 帧3.5 DATA 帧3.6 PING3.7 GOAWAY 帧3.8 RST_STREAM 帧3.9 PUSH_PROMISE 帧3.10 CONTINUATION 帧 你对http2了解多少&#xff…

git的基本概念和用法

Git是一个版本控制系统&#xff0c;它可以跟踪代码的变化并记录每个修改的历史。以下是Git的基本概念和使用方式&#xff1a; 仓库&#xff08;Repository&#xff09;&#xff1a;Git仓库是存储代码和历史记录的地方。它可以是本地仓库&#xff08;在本地电脑上&#xff09;或…

基于 EfficientNetV2 实现判别MNIST 手写模型分类

pytorch深度学习项目实战100例 的学习记录 我的环境&#xff1a; 白票大王&#xff1a; google colab 用其他的话&#xff0c;其实实现也行&#xff0c;但是让小白来重环境来开始安装的话&#xff0c;浪费时间 论文速读 EfficientNetV2是由 Google Research&#xff0c;Br…

移动端开发之uni-app开发规范说明

移动端开发之uni-app开发规范说明 文章目录 移动端开发之uni-app开发规范说明1. 工程结构2. 注释(必须)1. vue头文件注释2. 代码注释 1. 工程结构 一个uni-app工程&#xff0c;默认包含如下目录及文件&#xff1a; ┌─uniCloud 云空间目录&#xff0c;阿里云为…

华为配置智能升级功能升级设备示例

配置智能升级功能升级设备示例 组网图形 图1 配置智能升级功能组网图 背景信息组网需求配置思路前提条件操作步骤操作结果 背景信息 为了方便用户及时了解设备主流运行版本&#xff0c;快速完成升级修复&#xff0c;华为设备支持自动下载、自助升级功能。用户在设备Web网管…

【HTML】HTML基础7.2(有序列表)

目录 标签 效果 注意 标签 <ol> <li>列表内容</li> <li>列表内容</li> <li>列表内容</li> <li>列表内容</li> 。。。。。。 </ol> 效果 代码 <ol><li>银河护卫队 10000000000</li><l…

C++ LRU缓存

题目&#xff1a; //构建双向链表的节点结构&#xff08;要有两个构造函数&#xff09; struct Node{int key, val;Node* pre;Node* next;Node():key(0), val(0), pre(nullptr), next(nullptr) {}Node(int _key, int _val): key(_key), val(_val), pre(nullptr), next(nullpt…

windows无界鼠标,多机共享一套键鼠

原因 当前使用一台笔记本和一个台式机。用起来很麻烦。想要找到共享键鼠的方案。找到了无界鼠标这个软件。 安装 在两台电脑上都安装powertoy应用。 https://github.com/microsoft/PowerToys csdn下载 安装完成后找到无界鼠标打开 配置 多台电脑配置相同的key,刷新识别设…