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(初始数组, "");
相关文章:
vue3+element-plus组件下拉列表,数组数据转成树形数据
引入组件 可以直接在项目中引入element-plus表格组件,如果需要变成下拉列表样式需要添加以下属性: row-key 必填 最好给数字或唯一属性 , 给每个节点设置id 不填的话 没有办法实现展开效果 load 这个是动态添加数据的 前提(开启…...
【kubernetes】调度约束
目录 调度约束 Pod 启动典型创建过程如下 调度过程 指定调度节点 查看详细事件(发现未经过 scheduler 调度分配) 获取标签帮助 需要获取 node 上的 NAME 名称 给对应的 node 设置标签分别为 ggls 和 gglm 查看标签 修改成 nodeSelector 调度方…...
【深度学习MOT】SMILEtrack SiMIlarity LEarning for Multiple Object Tracking,论文
论文:https://arxiv.org/abs/2211.08824 文章目录 AbstractIntroduction2. 相关工作2.1 基于检测的跟踪2.1.1 检测方法2.1.2 数据关联方法 2.2 基于注意力的跟踪 3. 方法3.1 架构概述3.2 用于重新识别的相似性学习模块(SLM) Experimental Res…...
jmeter通过BeanShell对接口参数进行MD5和HmacSHA256加密【杭州多测师_王sir】
一、在eclipse里面编写MD5加密算法 package com.Base64;import java.security.MessageDigest; import java.security.NoSuchAlgorithmException;public class Md5Utils {public static String md5(String sourceStr) {String result "";try {MessageDigest md Mess…...
基于自适应曲线阈值和非局部稀疏正则化的压缩感知图像复原研究【自适应曲线阈值去除加性稳态白/有色高斯噪声】(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
Spring AOP 切点表达式
参考博客: 参考博客...
打破传统直播,最新数字化升级3DVR全景直播
导语: 近年来,随着科技的不断创新和发展,传媒领域也正经历着一场前所未有的变革。在这个数字化时代,直播已经不再仅仅是在屏幕上看到一些人的视频,而是将观众带入一个真实世界的全新体验。其中,3DVR全景直…...
网络安全--利用awk分析Apache日志
一、溯源 你会溯源吗?怎么溯 拿到日志(ssh登录日志,Apache日志),通过日志溯到ip,对日志进行每天的拆分,第二通过awk日志分析工具对每天的日志进行拆分,分析某一个ip今天对我访问多…...
计算机视觉一 —— 介绍与环境安装
傲不可长 欲不可纵 乐不可极 志不可满 一、介绍 研究理论和应用 - 研究如何使机器“看”的科学 - 让计算机具有人类视觉的所有功能 - 让计算机从图像中,提取有用的信息,并解释 - 重构人眼;重构视觉皮层;重构大脑剩余部分 计…...
如何看懂统一社会信用代码?
在查看企业信息的时候,我们通常第一时间查看的就是该企业的照面信息:企业名称,企业信用代码,企业法人等等。 其中统一社会信用代码就是给各个企业组织编号,是便于统一识别管理的一串代码,类似我们的身份证…...
systrace: 系统级跟踪工具的解析
关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、人工智能等,希望大家多多支持。 目录 一、导读二、概览三、获取systrace文件3.1 通过python命令获取3.1.…...
关于青少年学习演讲与口才对未来的领导力的塑造的探析
标题:青少年学习演讲与口才对未来领导力的塑造:一项探析 摘要: 本论文旨在探讨青少年学习演讲与口才对未来领导力的塑造的重要性和影响。通过分析演讲和口才对青少年的益处,以及如何培养这些技能来促进领导力的发展,我…...
大数据分析案例-基于KMeans和DBSCAN算法对汽车行业客户进行聚类分群
🤵♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞Ǵ…...
Vue 3 中定义组件常用方法
在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API,情况大不相同 1、方式一:Options API 这是在 Vue 中声明组件的最常见方式。从版本 1 开始可用,您很可能已经熟悉它。一切都在对象内声明,数据在幕后由 Vue 响应。它不是…...
Linux | curl命令调用接口时查看调用时长和详情
关注wx: CodingTechWork 引言 在服务器中通过curl命令调用接口时,我们经常需要分析一些时长。本文主要总结两种方式进行处理。 curl命令 使用time命令 time curl -k -u <username>:<password> https://127.0.0.1/xxxx -vvv 使用文本 编…...
用ngrok实现内网穿透,一行命令就搞定!
最近在写支付的东西,调试时候需要让支付平台能够回调本地接口来更新支付成功的状态。但由于开发机器没有公网IP,所以需要使用内网穿透来让支付平台能够成功访问到本地开发机器,这样才能更高效率的进行调试。 推荐内网穿透的文章已经很多很多…...
C++ 混合Python编程 及 Visual Studio配置
文章目录 需求配置环节明确安装的是64位Python安装目录 创建Console C ProjectCpp 调用 Python Demo 参考 需求 接手了一个C应用程序,解析csv和生成csv文件,但是如果要把多个csv文件合并成一个Excel,分布在不同的Sheet中,又想在一…...
斐波拉契数列+二进制--夏令营
1. f[40]{0,1} 数组赋值:只赋值前两个的话,剩余的自动为0 2.先要自己写出斐波拉契数列判断一下应该要多少个斐波拉契数样例,第39项已经超样例数500了,所以够用 3.就是把一个数字拆分成斐波拉契数列里的数的和嘛,但是…...
【使用Hilbert变换在噪声信号中进行自动活动检测】基于Hilbert变换和平滑技术进行自动信号分割和活动检测研究(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
招商蛇口 | 执笔CID,启幕低密生活新境
作为中国城市生长的力量,招商蛇口以“美好生活承载者”为使命,深耕全球111座城市,以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子,招商蛇口始终与城市发展同频共振,以建筑诠释对土地与生活的…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...
Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...
