当前位置: 首页 > news >正文

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表格组件&#xff0c;如果需要变成下拉列表样式需要添加以下属性&#xff1a; row-key 必填 最好给数字或唯一属性 &#xff0c; 给每个节点设置id 不填的话 没有办法实现展开效果 load 这个是动态添加数据的 前提&#xff08;开启…...

【kubernetes】调度约束

目录 调度约束 Pod 启动典型创建过程如下 调度过程 指定调度节点 查看详细事件&#xff08;发现未经过 scheduler 调度分配&#xff09; 获取标签帮助 需要获取 node 上的 NAME 名称 给对应的 node 设置标签分别为 ggls 和 gglm 查看标签 修改成 nodeSelector 调度方…...

【深度学习MOT】SMILEtrack SiMIlarity LEarning for Multiple Object Tracking,论文

论文&#xff1a;https://arxiv.org/abs/2211.08824 文章目录 AbstractIntroduction2. 相关工作2.1 基于检测的跟踪2.1.1 检测方法2.1.2 数据关联方法 2.2 基于注意力的跟踪 3. 方法3.1 架构概述3.2 用于重新识别的相似性学习模块&#xff08;SLM&#xff09; 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代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

Spring AOP 切点表达式

参考博客&#xff1a; 参考博客...

打破传统直播,最新数字化升级3DVR全景直播

导语&#xff1a; 近年来&#xff0c;随着科技的不断创新和发展&#xff0c;传媒领域也正经历着一场前所未有的变革。在这个数字化时代&#xff0c;直播已经不再仅仅是在屏幕上看到一些人的视频&#xff0c;而是将观众带入一个真实世界的全新体验。其中&#xff0c;3DVR全景直…...

网络安全--利用awk分析Apache日志

一、溯源 你会溯源吗&#xff1f;怎么溯 拿到日志&#xff08;ssh登录日志&#xff0c;Apache日志&#xff09;&#xff0c;通过日志溯到ip&#xff0c;对日志进行每天的拆分&#xff0c;第二通过awk日志分析工具对每天的日志进行拆分&#xff0c;分析某一个ip今天对我访问多…...

计算机视觉一 —— 介绍与环境安装

傲不可长 欲不可纵 乐不可极 志不可满 一、介绍 研究理论和应用 - 研究如何使机器“看”的科学 - 让计算机具有人类视觉的所有功能 - 让计算机从图像中&#xff0c;提取有用的信息&#xff0c;并解释 - 重构人眼&#xff1b;重构视觉皮层&#xff1b;重构大脑剩余部分 计…...

如何看懂统一社会信用代码?

在查看企业信息的时候&#xff0c;我们通常第一时间查看的就是该企业的照面信息&#xff1a;企业名称&#xff0c;企业信用代码&#xff0c;企业法人等等。 其中统一社会信用代码就是给各个企业组织编号&#xff0c;是便于统一识别管理的一串代码&#xff0c;类似我们的身份证…...

计算机网络 运输层端口号,复用、分用

...

systrace: 系统级跟踪工具的解析

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、获取systrace文件3.1 通过python命令获取3.1.…...

关于青少年学习演讲与口才对未来的领导力的塑造的探析

标题&#xff1a;青少年学习演讲与口才对未来领导力的塑造&#xff1a;一项探析 摘要&#xff1a; 本论文旨在探讨青少年学习演讲与口才对未来领导力的塑造的重要性和影响。通过分析演讲和口才对青少年的益处&#xff0c;以及如何培养这些技能来促进领导力的发展&#xff0c;我…...

大数据分析案例-基于KMeans和DBSCAN算法对汽车行业客户进行聚类分群

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

Vue 3 中定义组件常用方法

在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API&#xff0c;情况大不相同 1、方式一&#xff1a;Options API 这是在 Vue 中声明组件的最常见方式。从版本 1 开始可用&#xff0c;您很可能已经熟悉它。一切都在对象内声明&#xff0c;数据在幕后由 Vue 响应。它不是…...

Linux | curl命令调用接口时查看调用时长和详情

关注wx&#xff1a; CodingTechWork 引言 在服务器中通过curl命令调用接口时&#xff0c;我们经常需要分析一些时长。本文主要总结两种方式进行处理。 curl命令 使用time命令 time curl -k -u <username>:<password> https://127.0.0.1/xxxx -vvv 使用文本 编…...

用ngrok实现内网穿透,一行命令就搞定!

最近在写支付的东西&#xff0c;调试时候需要让支付平台能够回调本地接口来更新支付成功的状态。但由于开发机器没有公网IP&#xff0c;所以需要使用内网穿透来让支付平台能够成功访问到本地开发机器&#xff0c;这样才能更高效率的进行调试。 推荐内网穿透的文章已经很多很多…...

C++ 混合Python编程 及 Visual Studio配置

文章目录 需求配置环节明确安装的是64位Python安装目录 创建Console C ProjectCpp 调用 Python Demo 参考 需求 接手了一个C应用程序&#xff0c;解析csv和生成csv文件&#xff0c;但是如果要把多个csv文件合并成一个Excel&#xff0c;分布在不同的Sheet中&#xff0c;又想在一…...

斐波拉契数列+二进制--夏令营

1. f[40]{0,1} 数组赋值&#xff1a;只赋值前两个的话&#xff0c;剩余的自动为0 2.先要自己写出斐波拉契数列判断一下应该要多少个斐波拉契数样例&#xff0c;第39项已经超样例数500了&#xff0c;所以够用 3.就是把一个数字拆分成斐波拉契数列里的数的和嘛&#xff0c;但是…...

【使用Hilbert变换在噪声信号中进行自动活动检测】基于Hilbert变换和平滑技术进行自动信号分割和活动检测研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

支付密钥硬编码、调试模式未关闭、日志泄露token——PHP生产环境支付接口的3大“自杀式配置”

第一章&#xff1a;支付接口安全配置的致命认知误区许多开发者将“启用HTTPS”等同于“支付接口已安全”&#xff0c;却忽视了服务端密钥管理、签名验证逻辑与回调校验机制的根本性缺陷。这种简化式安全观&#xff0c;恰恰是黑产批量盗刷和中间人劫持事件频发的核心诱因。误信客…...

RDMA 核心原理:RoCE v2 与传输操作详解

一、RDMA原理操作 RDMA 传输符合 RoCE v2 协议 RDMA over Converged Ethernet (RoCE) 是一种网络协议&#xff0c;它利用远程直接内存访问 (RDMA) 功能来显着加速托管在服务器集群和存储阵列上的应用程序之间的通信。RoCE 结合了IBTARDMA 语义&#xff0c;允许设备在应用程序级…...

EdgeConnect实战教程:修复CelebA和Places2数据集图像的终极指南

EdgeConnect实战教程&#xff1a;修复CelebA和Places2数据集图像的终极指南 【免费下载链接】edge-connect EdgeConnect: Structure Guided Image Inpainting using Edge Prediction, ICCV 2019 https://arxiv.org/abs/1901.00212 项目地址: https://gitcode.com/gh_mirrors…...

告别提取码困扰:baidupankey让百度网盘资源获取效率倍增

告别提取码困扰&#xff1a;baidupankey让百度网盘资源获取效率倍增 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 一、用户困境解析&#xff1a;提取码获取的隐性成本 在数字化资源交换日益频繁的今天&#xff0c;百度网盘…...

PHP容器化落地国产化替代的最后1公里:从Docker镜像构建、OpenEuler适配到等保2.0合规部署(含12项硬性检测项)

第一章&#xff1a;PHP容器化部署国产化适配方案在信创背景下&#xff0c;PHP应用需适配国产操作系统&#xff08;如统信UOS、麒麟V10&#xff09;、国产CPU架构&#xff08;鲲鹏、飞腾、海光、兆芯&#xff09;及国产中间件生态。容器化是实现跨平台一致部署与国产环境快速迁移…...

从Azure IoT Edge到纯裸金属:.NET 9单文件部署瘦身术(体积压缩62%,启动提速3.8倍,附官方未文档化--strip-symbol参数)

第一章&#xff1a;从Azure IoT Edge到纯裸金属&#xff1a;.NET 9单文件部署瘦身术&#xff08;体积压缩62%&#xff0c;启动提速3.8倍&#xff0c;附官方未文档化--strip-symbol参数&#xff09;当.NET应用从Azure IoT Edge容器环境迁移到资源受限的工业边缘裸金属设备&#…...

你知道ZooKeeper分布式锁怎么应用吗?【原理与实现深度解析】

目录 一、前言 二、核心实现原理 1. 创建节点 2. 获取子节点列表 3. 判断是否获取锁 4. 监听前序节点 5. 等待与重试 三、锁的类型与实现变体 排他锁&#xff08;Exclusive Lock&#xff09; 共享锁&#xff08;Shared Lock&#xff09; 可重入锁&#xff08;Reentr…...

开源能源管理实战指南:从零开始掌握OpenEMS系统应用

开源能源管理实战指南&#xff1a;从零开始掌握OpenEMS系统应用 【免费下载链接】openems OpenEMS - Open Source Energy Management System 项目地址: https://gitcode.com/gh_mirrors/op/openems OpenEMS&#xff08;开源能源管理系统&#xff09;作为一款模块化的能源…...

5分钟搞定Linux打印机驱动:foo2zjs终极配置指南

5分钟搞定Linux打印机驱动&#xff1a;foo2zjs终极配置指南 【免费下载链接】foo2zjs A linux printer driver for QPDL protocol - copy of http://foo2zjs.rkkda.com/ 项目地址: https://gitcode.com/gh_mirrors/fo/foo2zjs 你是否曾经在Linux系统上为打印机驱动而烦恼…...

Nanbeige4.1-3B Chainlit企业就绪:GDPR数据擦除、会话加密、审计日志留存策略

Nanbeige4.1-3B Chainlit企业就绪&#xff1a;GDPR数据擦除、会话加密、审计日志留存策略 1. 引言&#xff1a;当开源大模型遇上企业合规 想象一下这个场景&#xff1a;你的团队刚刚部署了一个功能强大的开源大语言模型&#xff0c;比如Nanbeige4.1-3B&#xff0c;用它来辅助…...