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) => {

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

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

相关文章

5 分布式ID

这里讲一个比较常用的分布式防重复的ID生成策略&#xff0c;雪花算法 一个用户体量比较大的分布式系统必然伴随着分表分库&#xff0c;分机房部署&#xff0c;单体的部署方式肯定是承载不了这么大的体量。 雪花算法的结构说明 如下图所示: 雪花算法组成 从上图我们可以看…

怎么实现Redis的高可用?

大家好&#xff0c;我是锋哥。今天分享关于【怎么实现Redis的高可用&#xff1f;】面试题。希望对大家有帮助&#xff1b; 怎么实现Redis的高可用&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 为了实现 Redis 的高可用性&#xff0c;我们需要保证在发…

牛客网刷题 ——C语言初阶(6指针)——BC106 上三角矩阵判定

1. 题目描述——BC106 上三角矩阵判定 牛客网OJ题链接 描述 KiKi想知道一个n阶方矩是否为上三角矩阵&#xff0c;请帮他编程判定。上三角矩阵即主对角线以下的元素都为0的矩阵&#xff0c;主对角线为从矩阵的左上角至右下角的连线。 示例 输入&#xff1a; 3 1 2 3 0 4 5 0 0…

H266/VVC 帧内预测中 ISP 技术

帧内子划分 ISP ISP 技术是在 JVET-2002-v3 提案中详细介绍其原理&#xff0c;在 VTM8 中完整展示算法。ISP是线基内预测&#xff08;LIP&#xff09;模式的更新版本&#xff0c;它改善了原始方法在编码增益和复杂度之间的权衡&#xff0c;ISP 算法的核心原理就是利用较近的像…

了解npm:JavaScript包管理工具

在JavaScript的生态系统中&#xff0c;npm&#xff08;Node Package Manager&#xff09;无疑是一个举足轻重的存在。它不仅是Node.js的包管理器&#xff0c;更是前端开发不可或缺的一部分&#xff0c;为开发者提供了丰富的包资源、便捷的包管理以及强大的社区支持。本文将深入…

CNN Test Data

由于数据量过大&#xff0c;打不开了 搞一组小的吧。收工睡觉 https://download.csdn.net/download/spencer_tseng/90256048

自动化测试脚本实践:基于 Bash 的模块化测试框架

前言 在现代软件开发中&#xff0c;测试自动化是确保软件质量和稳定性的核心手段之一。随着开发周期的缩短和功能模块的增多&#xff0c;手动测试逐渐无法满足高效性和准确性的需求。因此&#xff0c;测试人员需要依赖自动化工具来提升测试效率&#xff0c;减少人为干预和错误。…

verilogHDL仿真详解

前言 Verilog HDL中提供了丰富的系统任务和系统函数&#xff0c;用于对仿真环境、文件操作、时间控制等进行操作。&#xff08;后续会进行补充&#xff09; 正文 一、verilogHDL仿真详解 timescale 1ns/1ps //时间单位为1ns&#xff0c;精度为1ps&#xff0c; //编译…

Nginx 配置支持 HTTPS 代理

个人博客地址&#xff1a;Nginx 配置支持 HTTPS 代理 | 一张假钞的真实世界 本文描述的是Nginx HTTPS反向代理的情况&#xff08;即后端服务是HTTP的&#xff09;。 使用openssl配置ssl证书 生成服务器端的私钥&#xff08;key 文件&#xff09;&#xff1a; # openssl gen…

协同过滤算法商品推荐系统|Java|SpringBoot|VUE|

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SpringBoot、Mybatis-Plus、VUE、jquery,html 5⃣️…

初学stm32 --- DMA直接存储器

目录 DMA介绍 STM32F1 DMA框图 DMA处理过程 DMA通道 DMA优先级 DMA相关寄存器介绍 F1 DMA通道x配置寄存器&#xff08;DMA_CCRx&#xff09; DMA中断状态寄存器&#xff08;DMA_ISR&#xff09; DMA中断标志清除寄存器&#xff08;DMA_IFCR&#xff09; DMA通道x传输…

数据通过canal 同步es,存在延迟问题,解决方案

当使用 Canal 同步数据到 Elasticsearch&#xff08;ES&#xff09;时&#xff0c;出现延迟问题通常源于多个因素&#xff0c;如 Canal 配置、网络延迟、ES 的负载和性能瓶颈等。以下是一些解决方案&#xff0c;帮助减少和解决延迟问题&#xff1a; 1. 优化 Canal 配置 Canal…

javafx 将项目打包为 Windows 的可执行文件exe

要将 JavaFX 项目打包为 .exe 文件&#xff0c;你可以使用一些工具将你的应用程序封装为 Windows 可执行文件。以下是两种常用的方法&#xff1a; 方法 1&#xff1a;使用 jpackage&#xff08;适用于 JDK 14 及更高版本&#xff09; jpackage 是 JDK 内置的工具&#xff0c;…

SQL进阶实战技巧:即时订单比例问题

目录 0 需求描述 1 数据准备 2 问题分析 3 小结 往期精彩 0 需求描述 订单配送中,如果期望配送日期和下单日期相同,称为即时订单,如果期望配送日期和下单日期不同,称为计划订单。 请从配送信息表(delivery_info)中求出每个用户的首单(用户的第一个订单)中即时订单…

Routine Load 导入问题处理指南

Routine Load 导入问题处理指南 在使用 Apache Doris 的 Routine Load 时&#xff0c;你是否曾经被各种奇奇怪怪的问题卡住&#xff1f;今天就来分享一些最常见的 Routine Load 问题&#xff0c;并提供相应的解决方案&#xff0c;让你快速应对&#xff0c;高效解决&#xff01;…

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

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

牛客 《反转链表》 链表 题解

前言 太久没有练习C和Java&#xff0c;基本忘完了…还有数据结构也不太熟悉了。借此机会回顾一下相关的知识点&#xff0c;也为之后做准备吧。 题目内容 思路 要求时间复杂度为O(n)&#xff0c;那么只能遍历一次。反转的话&#xff0c;只需要将链表箭头指向换个方向就行。遍…

容器技术全面攻略:Docker的硬核玩法

文章背景 想象一下&#xff0c;一个项目终于要上线了&#xff0c;结果因为环境配置不一致&#xff0c;测试服务器一切正常&#xff0c;生产环境却宕机了。这是开发者噩梦的开始&#xff0c;也是Docker救世主角色的登场&#xff01;Docker的出现颠覆了传统环境配置的方式&#…

RabbitMQ高级篇

目录 确保发送者的可靠 为什么需要确保发送者的可靠性 RabbitMQ 的发送者重连机制配置 springAMQP实现发送者确认 MQ的可靠性 为什么需要实现MQ的可靠性&#xff1f; 数据持久化 Lazy Queue 核心思想 总结RabbitMQ 如何保证消息的可靠性 持久化 Lazy Queue 消息…

微信小程序用的SSL证书有什么要求吗?

微信小程序主要建立在手机端使用&#xff0c;然而手机又涉及到各种系统及版本&#xff0c;所以对SSL证书也有要求&#xff0c;如果要小程序可以安全有效的访问需要满足以下要求&#xff1a; 1、原厂SSL证书&#xff08;原厂封&#xff09;。 2、DV单域名或者DV通配符。 3、兼…