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

vue3树形组件+封装+应用

文章目录

    • 概要
      • 应用场景
      • 代码注释
      • 综合评价
      • 注意事项
    • 功能拓展
      • 代码说明

概要

创建一个基于Vue 3的树形结构组件,用于展示具有层级关系的数据,并提供了节点展开/折叠、点击等交互功能。以下是对其应用场景、代码注释以及综合评价和注意事项的详细说明。

应用场景

这个组件适用于需要展示层级结构数据的场景,例如:

  • 菜单导航:展示多级菜单,用户可以点击展开或折叠子菜单。
  • 文件目录结构:呈现文件系统的目录层级,方便用户浏览和操作。
  • 组织架构展示:展示公司或团队的组织架构,显示不同层级的人员或部门。
  • 图标自定义:根据项目需求可自定义树形结构以及不同层级样式及不同图标,自行修改更换即可。

代码注释

<template><div class="treeBox" id="treeBox"><!-- 遍历树形数据,为每个节点生成相应的DOM元素 --><div v-for="(item, index) in props.treeData" @click.stop.prevent="lonelyClick(item)" :title="item.label" :class="['lonely', 'lonely'+item.level]"><!-- 如果节点有子节点,显示展开/折叠图标 --><span @click.stop="iconClick(item, $event)" v-if="item.children"><el-icon :class="['faicon','level'+item.level, 'downIcon']" v-if="item.isExtend"><DArrowRight /></el-icon><el-icon :class="['faicon','level'+item.level, 'rightIcon']" v-else><DArrowRight/></el-icon></span><!-- 如果节点有图片,显示图片图标 --><img :src="item.img" alt="" v-if="item.img" :class="['imgIcon', 'level'+item.level]"><!-- 显示节点标签,点击触发lonelyClick方法 --><span class="label" @click.stop="lonelyClick(item)":class="['level'+item.level, item.isActive? 'styActive' : '']">{{ item.label }}</span><!-- 如果节点有子节点且子节点数组不为空,显示子节点容器 --><div v-if="item.children&&item.children.length" class="childBox"><!-- 递归渲染子树形结构,只有当节点展开时才显示 --><myTree :treeData="item.children" v-if="item.isShow" @menuClick="menuClick"></myTree></div></div></div>
</template>
<script>
export default {name: "myTree",
};
</script>
<script setup>import {ref,reactive,toRefs,onMounted,getCurrentInstance} from "vue"// 定义组件接收的props,treeData为树形结构数据,默认提供了一个示例数据const props = defineProps({treeData: {type: Array,default: [{id: "1",label: "装备基础数据管理",img: null, //new URL(`./img/downArrow.png`, import.meta.url).href,path: "",isExtend: true,isShow: true,agentType: null,isActive: false,children: [{id: "1-1",label: "多源数据引接",img: null,pid: "1",path: "",isExtend: true,isShow: true,agentType: null,isActive: false,},],}]},})// 定义组件触发的事件,包括menuClick和iconClickconst emit = defineEmits(["menuClick", "iconClick"])// 定义响应式数据state,目前只有一个contentFlag属性const state = reactive({contentFlag: true})// 递归处理树形数据的方法,设置节点的isExtend、isShow和level属性const recursionArr = (arr) => {

相关文章:

vue3树形组件+封装+应用

文章目录 概要应用场景代码注释综合评价注意事项功能拓展代码说明概要 创建一个基于Vue 3的树形结构组件,用于展示具有层级关系的数据,并提供了节点展开/折叠、点击等交互功能。以下是对其应用场景、代码注释以及综合评价和注意事项的详细说明。 应用场景 这个组件适用于需…...

kotlin项目无法访问Java类的问题

使用IntelliJ创建一个Kotlin项目&#xff0c;然后在src/main/kotlin中创建一个java接口&#xff1a;Animal.java&#xff0c;然后在Main.kt中打印这个java接口&#xff0c;如下&#xff1a; fun main() {println(Animal::class.java) }代码在编辑器中并没有报错&#xff0c;但…...

计算机网络 (30)多协议标签交换MPLS

前言 多协议标签交换&#xff08;Multi-Protocol Label Switching&#xff0c;MPLS&#xff09;是一种在开放的通信网上利用标签引导数据高速、高效传输的新技术。 一、基本概念 MPLS是一种第三代网络架构技术&#xff0c;旨在提供高速、可靠的IP骨干网络交换。它通过将IP地址映…...

qt-C++笔记之自定义继承类初始化时涉及到parents的初始化

qt-C笔记之自定义继承类初始化时涉及到parents的初始化 code review! 参考笔记 1.qt-C笔记之父类窗口、父类控件、对象树的关系 2.qt-C笔记之继承自 QWidget和继承自QObject 并通过 getWidget() 显示窗口或控件时的区别和原理 3.qt-C笔记之自定义类继承自 QObject 与 QWidget …...

人才选拔中,如何优化面试流程

在与某大型央企的深入交流中&#xff0c;随着该企业的不断壮大与业务扩张&#xff0c;对技术人才的需求急剧上升&#xff0c;尽管企业加大了招聘力度并投入了大量资源&#xff0c;但招聘成效却不尽如人意。经过项目组细致调研与访谈&#xff0c;问题的根源逐渐浮出水面&#xf…...

2501wtl,皮肤技术

下载地址 设计目标 最重要的是使用方便,已有程序创建一个COM对象,调一个方法就可把界面外观全部改成Mac风格的. 另外一个目标是要有扩展性. 所以,基本设计是定义一个统一的接口,然后用不同实现.每一个实现单独放在一个COMDLL中,调用者选择一个类标创建对象就行了. 接口的定义…...

【面试题】技术场景 6、Java 生产环境 bug 排查

生产环境 bug 排查思路 分析日志&#xff1a;首先通过分析日志查看是否存在错误信息&#xff0c;利用之前讲过的 elk 及查看日志的命令缩小查找错误范围&#xff0c;方便定位问题。远程 debug 适用环境&#xff1a;一般公司正式生产环境不允许远程 debug&#xff0c;多在测试环…...

word论文排版常见问题汇总

word论文排版常见问题汇总 常用快捷键&#xff1a; Alt F9 正常模式与域代码模式切换 Ctrl F9 插入域代码 F9 刷新域代码显示&#xff0c;要注意选定后刷新才会有效果 word中在当前列表的基础上修改列表 在使用word时&#xff0c;我们会定义一个列表&#xff0c;并将其链接…...

传奇3仿韩服单机版安装教程+GM管理面板

今天为大家带来一款怀旧网单《传奇3仿韩服》的游戏架设&#xff0c;适用于单机娱乐&#xff0c; 仅供怀旧&#xff0c;本人已经安装游戏成功&#xff0c;特此带来详细安装教程。 适用环境 单机 视频演示 传奇3仿韩服单机 亲测截图 架设步骤 关闭默认杀毒软件和其它自己下的杀…...

第26章 汇编语言--- 内核态与用户态

汇编语言是低级编程语言的一种&#xff0c;它与特定计算机的硬件架构紧密相关。内核态和用户态是操作系统中进程运行的两种不同模式&#xff0c;它们用来区分操作系统内核代码和其他应用程序代码的执行环境。下面我将简要解释这两种状态&#xff0c;并给出一个简单的示例来展示…...

Spring bean的生命周期和扩展

接AnnotationConfigApplicationContext流程看实例化的beanPostProcessor-CSDN博客&#xff0c;以具体实例看bean生命周期的一些执行阶段 bean生命周期流程 生命周期扩展处理说明实例化:createBeanInstance 构造方法&#xff0c; 如Autowired的构造方法注入依赖bean 如UserSer…...

计算机网络 (33)传输控制协议TCP概述

一、定义与基本概念 TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议。它工作在OSI模型的第四层&#xff0c;即传输层&#xff0c;为用户提供可靠的、有序的和无差错的数据传输服务。TCP协议与UDP协议是传输层的两大主要协议&#xff0c;但两者在设计上有明显的不同&…...

Python3 JSON

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成。它基于JavaScript编程语言的一个子集&#xff0c;但JSON是独立于语言的&#xff0c;很多编程语言都支持JSON格式数据的…...

Leetcode 698 Partition to K Equal Sum Subsets

题意 给一个数组&#xff0c;要求把数组里的元素分成k个子集&#xff0c;满足每个子集中数的总和是相等的。问是否能分成k个子集 题目链接 https://leetcode.com/problems/partition-to-k-equal-sum-subsets/description/ 思考 想象你有k个桶&#xff0c;然后你有n个小球&…...

可靠的人形探测,未完待续(III)

一不小心&#xff0c;此去经年啊。问大家新年快乐&#xff01; 那&#xff0c;最近在研究毫米波雷达模块嘛&#xff0c;期望用在后续的产品中&#xff0c;正好看到瑞萨的活动送板子&#xff0c;手一下没忍住。 拿了板子就得干活咯&#xff0c;我一路火花带闪电&#xff0c;开整…...

Git文件夹提交错了,怎么撤销?

最近提交了一些不应该提交的文件夹到git中,现在需要移除它们,现在简单记录一下操作日志: 情况一 文件夹已经被添加到 Git&#xff0c;但未提交 如果文件夹已经被 git add 添加到暂存区中&#xff0c;但尚未提交&#xff0c;你可以使用以下命令将其从暂存区中移除: git rm -r …...

小程序textarea组件键盘弹起会遮挡住输入框

<textarea value"{{remark}}" input"handleInputRemark" ></textarea> 如下会有遮挡&#xff1a; 一行代码搞定 cursor-spacing160 修改后代码 <textarea value"{{remark}}" input"handleInputRemark" cursor-spacin…...

Android车机DIY开发之学习篇(二)编译Kernel以正点原子为例

Android车机DIY开发之学习篇(二)编译Kernel以正点原子为例 1.代码在/kernel-5.10文件夹下 2.在kernel-5.10目录下执行如下命令编译 &#xff1a; 编译之前&#xff0c;需要将 clang 导出到 PATH 环境变量&#xff1a; 如果是 Android12 执行下面这条命令 export PATH../pr…...

qt 窗口(window/widget)绘制/渲染顺序 QPainter QPaintDevice Qpainter渲染 失效 无效

qt窗体布局 窗体渲染过程 qt中窗体渲染逻辑顺序为 本窗体->子窗体/控件 递归&#xff0c;也就是说先渲染父窗体再渲染子窗体。其中子窗体按加入时的先后顺序进行渲染。通过下方的函数调用堆栈可以看出窗体都是在widget组件源码的widgetprivate::drawwidget中进行渲染的&am…...

Ubuntu下载时不显示无线网图标并显示Cable unplugged

我用的是ubuntu22-04-5.iso一下载出来发现无法连接网络甚至直接显示Wired是Cable unplugged. 下面是解决方法&#xff1a; step1: step2:点击编辑中的虚拟网络编辑器 step3: step4: step5: step6:取消勾选自动检测可用的DNS服务器 step7&#xff1a;在window上按下winR输入c…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...