vue3+element-plus组件下拉列表,数组数据转成树形数据

引入组件

可以直接在项目中引入element-plus表格组件,如果需要变成下拉列表样式需要添加以下属性:

row-key 必填 最好给数字或唯一属性 , 给每个节点设置id 不填的话 没有办法实现展开效果
load 这个是动态添加数据的 前提(开启lazy ,表格数组里设置了hasChildren:true)
treeprops 是配置树状收缩数据的
treeprops :{hasChildren} 是否可收缩
treeprops :{children} 展开的子项

代码示例:

 <el-table:data="(所需要的渲染数据)"row-key="id"style="width: 100%; border: 0.1px solid #ebeef5"v-loading="loading"lazy:load="load":tree-props="{ hasChildren: 'hasChildren', children: 'children' }"//>

普通数组转换成树形数据

 const transListDataToTreeData = (list, root) => {console.log(list);const arr = [];// 1.遍历list.forEach(item => {// 2.首次传入空字符串  判断list的pid是否为0 如果为空就是一级节点if (item.pid === root) {// 找到之后就要去找item下面有没有子节点  以 item.id 作为 父 id, 接着往下找const children = transListDataToTreeData(list, item.id);if (children.length > 0) {// 如果children的长度大于0,说明找到了子节点item.children = children;}// 将item项, 追加到arr数组中arr.push(item);console.log(arr);console.log(arr);}});return arr;};transListDataToTreeData(初始数组, "");

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

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

相关文章

使用MyEclipse如何部署Descriptor (XML)编辑器?

Descriptor (XML) Editor编辑器包含了高级的XML编辑功能&#xff0c;在本文中您将了解到这些编辑功能、Web XML编辑等&#xff0c;此功能包含在MyEclipse中可用。 MyEclipse v2023.1.2离线版下载 1. Web XML 编辑器 MyEclipse Web XML编辑器包括高级XML编辑功能&#xff0c;…

最新AI创作系统ChatGPT程序源码+详细搭建部署教程+微信公众号版+H5源码/支持GPT4.0+GPT联网提问/支持ai绘画+MJ以图生图+思维导图生成!

使用Nestjs和Vue3框架技术&#xff0c;持续集成AI能力到系统&#xff01; 新增 MJ 官方图片重新生成指令功能同步官方 Vary 指令 单张图片对比加强 Vary(Strong) | Vary(Subtle)同步官方 Zoom 指令 单张图片无限缩放 Zoom out 2x | Zoom out 1.5x新增GPT联网提问功能、手机号注…

深入了解 Postman Test 校验的使用方法

Postman 是一个广泛使用的 API 开发工具&#xff0c;它允许开发人员测试 API 的各个方面&#xff0c;包括请求、响应、身份验证等等&#xff0c;其中最常用的功能之一就是 Test 校验。那今天就一起来看看 Postman 的 Test 校验该如何使用。 Test 校验是什么&#xff1f; Test…

【Spring】浅谈spring为什么推荐使用构造器注入

目录 一、前言 二、常见的三种注入方式 2.1 field注入 2.2 构造器注入 2.3 setter注入 三、构造器注入的好处 四、答疑 五、总结 一、前言 ​ Spring框架对Java开发的重要性不言而喻&#xff0c;其核心特性就是IOC&#xff08;Inversion of Control&#xff0c; 控制反转&…

RunLoop

1.CFRunLoopModeRef特征代表RunLoop对象内的运行模式(每个RunLoop对象内存中存在很多种运行模式,每个Mode运行模式下必然包含若干个有效的Source0/Source1/Timer/Observer数据序组) 2.RunLoop对象活跃(操作)启动时能且仅能选择某个Mode匹配currentMode(暗示Loop对象的操作运行必…

分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测

分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测 目录 分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现BO-BiGRU贝叶斯优化双向门控循环单元多特征分…

2.1.2 VisionOS——VisionOS 中的窗口化应用程序

在visionOS中&#xff0c;用户可以使用窗口来呈现2D或3D内容&#xff0c;或者使用体积来呈现3D内容和对象。Unity 将这些窗口中的应用程序描述为“窗口应用程序”。 默认情况下&#xff0c;如果您构建针对visionOS 平台的Unity 应用程序而未通过XR 插件管理器启用PolySpatial …

React - useEffect函数的理解和使用

文章目录 一&#xff0c;useEffect描述二&#xff0c;它的执行时机三&#xff0c;useEffect分情况使用1&#xff0c;不写第二个参数 说明监测所有state&#xff0c;其中一个变化就会触发此函数2&#xff0c;第二个参数如果是[]空数组&#xff0c;说明谁也不监测3&#xff0c;第…

gRPC vs REST:创建API的方法比较

本文对gRPC和REST的特征和区别进行了介绍&#xff0c;这可能是当今创建API最常用的两种方法。 文章目录 一、gRPC的介绍 二、什么是REST&#xff1f; 三、什么是gRPC? 四、gRPC和REST的比较 &#xff08;1&#xff09;底层HTTP协议 &#xff08;2&#xff09;支持的数据…

平替 Docker - 玩转容器新利器 Podman Desktop (视频)

《OpenShift 4.x HOL教程汇总》 在 podman-desktop 1.2.1 podman 4.4 环境中验证。 文章目录 什么是 podman 和 podman-desktop安装 podman 和 podman-desktop 基本环境Image、Container 和 Pod 的基本操作拉取 Image运行 Container 将 Pod 部署到 Kubernetes安装 Kind 扩展插…

Python爬虫——selenium_元素定位

元素定位&#xff1a;自动化要做的就是模拟鼠标和键盘来操作这些元素&#xff0c;点击&#xff0c;输入等等。操作这些元素前首先要找到它们&#xff0c;WebDriver提供很多定位元素的方法 from selenium import webdriver# 创建浏览器对象 path files/chromedriver.exe brows…

【安全】浅谈信息安全

信息安全 理解信息安全&#xff0c;要从“信息”、“安全”两个角度入手。 信息 信息是对客观世界的反映&#xff0c;表现客观事物的运动状态和变化的实质内容。 信息具有可识别、可传载、可共享、可度量的基本特征。 信息系统 信息系统是获取&#xff08;收集&#xff0…

中心对称链表

文章目录 1 题目2 思路2.1 思路一2.2 思路二2.3 考点2.4 扩展 3 实现3.1 思路13.2 思路23.3 完整例子 1 题目 已知长度为n&#xff08;n>1&#xff09;的单链表&#xff0c;表头指针为L&#xff0c;结点结构由data和next两个域构成&#xff0c;其中data域为字符型&#xff…

Linux RPM包安装、卸载和升级(rpm命令)详解

(转载请删除括号里的内容) 下面讲解一下&#xff0c;如何使用 rpm 命令对 RPM 二进制包进行安装、卸载和升级操作。我们以安装 apache 程序为例。 RPM包默认安装路径 通常情况下&#xff0c;RPM 包采用系统默认的安装路径&#xff0c;所有安装文件会按照类别分散安装到下表所…

优漫动游 大厂需要什么样的ui设计师呢?

通常来说大公司UI设计的流程主要是这样的&#xff1a;创意-头脑风暴-策划方案-交互设计&评审-美术设计&评审-开发实施&#xff0c;不过实际上大多数公司都有自己的一套流程&#xff0c;源于公司的基因、公司组织体系、公司领导风格。一起了解大厂需要什么样的ui设计师呢…

谷粒商城第十一天-品牌管理中关联分类

目录 一、总述 二、前端部分 1. 调整查询调用 2. 关联分类 三、后端部分 四、总结 一、总述 之前是在商品的分类管理中直接使用的若依的逆向代码 有下面的几个问题&#xff1a; 1. 表格上面的参数填写之后&#xff0c;都是按照完全匹配进行搜索&#xff0c;没有模糊匹配…

nodejs实现前后端websocket通信+心跳示例

nodejs后端代码 server.js //需要安装ws模块 npm install ws const WebSocket require("ws") const port 8085const ws new WebSocket.Server({port})ws.on("connection", (socket) > {socket.on("message",(message) > {const da…

自定义hook之首页数据请求动作封装 hooks

本例子实现了自定义hook之首页数据请求动作封装 hooks&#xff0c;具体代码如下 export type OrganData {dis: Array<{ disease: string; id: number }>;is_delete: number;name: string;organ_id: number;parent_id: number;sort: number; }; export type SwiperData …

【STM32】简介

&#x1f6a9; WRITE IN FRONT &#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四" &#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2022博客之星T…

(2)linux虚拟机配置中文输入法和如何下载软件

&#xff08;一&#xff09;配置中文输入法&#xff1a; 1、sudo apt-get install fcitx&#xff0c;安装fcitx框架&#xff0c;安装完成之后&#xff0c;选择该框架 2、接下来输入sudo apt-get install fcitx fcitx-googlepinyin&#xff0c;安装谷歌输入法之后&#xff0c;重…