将一个树形结构的数据平铺成一个一维数组(vue3)

news2025/2/25 21:41:50

一、需求描述

由于自带组件库没有具体完善,无法实现像element-ui这种可以多选选择任意一级的选项,也就是说,选择父级的时候不会联动选择子级的全部
例如:
在这里插入图片描述
所以,才会出现【二、案例场景】类似的场景,可以用来多选 ,并可以实现单选父级而不关联子级,选择了将树状数据进行平铺,并且可以分类,为了实现这个,可是绞尽脑汁呀

二、案例场景

将一个树形结构的数据平铺成一个一维数组,并以 parentName - currentName展示,类似第一级-第二级-第三级-第四级 展示

三、实现案例展示


在这里插入图片描述

转变为
在这里插入图片描述
在这里插入图片描述

四、代码展示

采用递归方式去格式化数据

级联数据【现成组件,可以直接使用】-格式化接口数据,转换为 lable,value,children的格式
/**
 * 格式化分类列表
 * 将原始数据格式化为级联选择器可以识别的数据格式
 * @param {CategoryOptionsType[]} categoryOptions 分类列表
 * @return {CategoryOptionsType[]} 返回格式化后的分类列表
 */
export const fomatterCategoryList = (categoryOptions: CategoryOptionsType[]) => {
  // 遍历分类列表
  categoryOptions?.forEach((item: CategoryOp

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

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

相关文章

浅谈 Linux 下 vim 的使用

Vim 是从 vi 发展出来的一个文本编辑器,其代码补全、编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用。 Vi 是老式的字处理器,功能虽然已经很齐全了,但还有可以进步的地方。Vim 可以说是程序开发者的一项很好用的工…

AutoSAR配置与实践(基础篇)3.6 BSW的WatchDog功能

3.6 BSW的WatchDog功能 一、WatchDog功能介绍1.1 WatchDog 模块组成1.2 内外部看门狗区别和原理1.3 常见看门狗校验方式一、WatchDog功能介绍 1.1 WatchDog 模块组成 WatchDog 即看门狗功能。这个看门狗不是真正看家的狗,而是软件的一个模块,但是因为功能类似故以此起名。主…

LeetCodeHot100python版本:单调栈,栈,队列,堆

单调栈 739. 每日温度 42. 接雨水 双指针 单调栈(横向求解) ​​​​​​84. 柱状图中最大的矩形 栈和队列 队列:先入先出 栈:先入后出 两个栈 模拟 队列 一个队列 可以模拟 栈 20. 有效的括号 ​​​​​​155. 最小栈 394. 字符串解码 堆 215. 数组中的第K个最大元素 3…

嵌入式Linux开发实操(十二):PWM接口开发

# 前言 使用pwm实现LED点灯,可以说是嵌入式系统的一个基本案例。那么嵌入式linux系统下又如何实现pwm点led灯呢? # PWM在嵌入式linux下的操作指令 实际使用效果如下,可以通过shell指令将开发板对应的LED灯点亮。 点亮3个LED,则分别使用pwm1、pwm2和pwm3。 # PWM引脚的硬…

拆解1000篇爆文!揭秘种草爆文四大万能公式

2023年上半场已收官,小红书用户青睐什么内容? 千瓜调研2023上半年的1000篇商业笔记爆文,从笔记类型和内容特征两大层面总结以下四大内容种草爆文公式,快来围观! 突破同质化 爆款内容创新风向 笔记类型角度 千瓜调…

2022年度瞪羚培育企业名单公布,科东软件上榜

8月23日,广州市黄埔区、广州开发区2022年度瞪羚企业和瞪羚培育企业名单公布。科东软件凭借国产化技术创新优势、成熟的数字化转型方案和强劲的经营成长韧性,入选广州开发区2022年度瞪羚培育企业。 瞪羚培育企业是指未来在科技创新或商业模式创新方面有…

Navicat安装教程

众所周知, Navicat是一款轻量级的用于MySQL连接和管理的工具,非常好用,使用起来方便快捷,简洁。下面我会简单的讲一下其安装以及使用的方法。并且会附带相关的永久安装教程。 简介 一般我们在开发过程中是离不开数据库的&#xf…

win11 设置小任务栏

设置后效果 以下两种工具均可 1、StartAllBack 2、Start11

安全防护产品对接流程讲解

服务器被攻击了,怎么对接高防产品呢,需要提供什么? 1、配置转发规则:提供域名、IP、端口,由专业技术人员为您配置转发协议/转发端口/源站IP等转发规则,平台会分配该线路独享高防IP。 2、修改DNS解析&…

2023年高教社杯数学建模思路 - 复盘:校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…

Frp自建内网穿透

目录 Frp使用须知 Frp的工作原理 Frp配置服务端 frp文件夹内的文件 frps.ini配置文件 仪表盘 Frp配置客户端 文件目录 frpc.ini配置文件 Frp使用须知 前言:自建frp需要部署服务端以及客户端,服务端类似于花生壳服务端,ngrok服务端…

SQL注入之HTTP头部注入

文章目录 cookie注入练习获取数据库名称获取版本号 base64注入练习获取数据库名称获取版本号 user-agent注入练习获取数据库名称获取版本号 cookie注入练习 向服务器传参三大基本方法:GPC GET方法,参数在URL中 POST,参数在body中 COOKIE,参数…

了解设备全生命周期管理的5个阶段和好处

在现代企业运营中,设备的有效管理对于提高生产效率和降低成本至关重要。设备全生命周期管理涵盖了从规划、获取、利用、维护到处置的一系列阶段,确保设备在其整个寿命内保持高效、可靠。本文将介绍设备全生命周期管理的基础知识,探讨每个阶段…

[蓝帽杯 2022 初赛]domainhacker

打开流量包,追踪TCP流,看到一串url编码 放到瑞士军刀里面解密 最下面这一串会觉得像base64编码 删掉前面两个字符就可以base64解码 依次类推,提取到第13个流,得到一串编码其中里面有密码 导出http对象 发现最后有个1.rar文件 不出…

解决 node-gyp 错误问题

gyp verb check python checking for Python executable “python2.7” in the PATH gyp verb which failed Error: not found: python2.7 安装老项目老是报错Python找不到,以为是自己node版本高过了node-sass导致的,把node版本降下来还是不行。然后找到…

Socket基本原理

一、简单介绍 Socket,又称套接字,是Linux跨进程通信(IPC,Inter Process Communication)方式的一种。相比于其他IPC方式,Socket牛逼在于可做到同一台主机内跨进程通信,不同主机间的跨进程通信。…

感受繁华都市中的人间温情 孙俪罗晋携手为爱《安家》|湖北卫视今晚开播

安居乐业是许多中国家庭一生绕不开的关卡,买房便成了持续不减的社会热点话题。电视剧《安家》将镜头对准与人们生活息息相关的房产行业,以房屋中介的视角,窥见民生百态,从看房、签订合同再到办理过户手续,高度还原了房…

IMS中Binder案例

IMS中Binder案例 1、FWK层中AIDL形式1.1 服务端实现Stub1.2 客户端获取proxy 2、Native层中AIDL形式2.1 服务端对应Bn端2.2 客户端对应Bp端 android12-release 1、FWK层中AIDL形式 Android 接口定义语言 (AIDL)、Android 应用层 到 HAL 层 AIDL形式是Android中binder机制的具体…

【python自动化】pytest系列(中)

书接上文:【python自动化】pytest系列(上) 本篇为中篇,后面还有两篇,从本篇开始,知识点会增加,难度会一丢丢的一次递增。 本章知识点 文章目录 1、上节内容知识点回顾2、Pytest的前置后置操作…

C语言:算数转换

一、什么是算数转换 已知:char 和 short 这两种字节长度小于 int 类型参与算术运算时,会进行整型提升。 而当字节长度大于 int 类型的数据参与运算时,如果某个操作符的两个操作数是不同类型,其中一个操作数需要按级别(…