活动介绍

vue3 el-menu菜单递归循环创建

时间: 2025-01-07 12:12:30 浏览: 109
### Vue 3 中使用 `el-menu` 组件通过递归循环创建菜单 #### 实现思路 为了在 Vue 3 和 Element Plus 中实现动态菜单,可以采用递归组件的方式处理多级嵌套的数据结构。这种方法能够简化模板逻辑并提高代码可维护性。 #### 数据准备 假设有一个表示菜单树形结构的对象数组作为输入源: ```javascript const menuData = [ { index: '1', title: '首页', icon: 'home-filled' }, { index: '2', title: '文档管理', children: [ {index: '2-1', title: '文件上传'}, {index: '2-2', title: '文件下载'} ] } ]; ``` 此数据模型支持无限层级的子节点扩展[^1]。 #### 渲染逻辑 定义一个名为 `<MenuTree>` 的自定义组件来负责渲染每一层菜单及其可能存在的子菜单。该组件接收两个属性:一个是当前级别的菜单列表 (`menus`);另一个是指定激活状态下的索引值(`activeIndex`)。 对于每一条记录而言: - 如果它不包含任何子项,则直接呈现为普通的 `el-menu-item`. - 若存在子集,则包裹于 `el-submenu` 内部,并再次调用相同的 `<MenuTree/>`, 将其传递给后者以继续构建更深层次的内容. 以下是完整的示例代码: ```html <template> <!-- MenuTree.vue --> <div v-for="(item, idx) in menus" :key="idx"> <el-menu-item v-if="!item.children" :index="item.index">{{ item.title }}</el-menu-item> <el-submenu v-else :index="item.index"> <template slot="title"><i :class="'el-icon-' + item.icon"></i>{{ item.title }}</template> <MenuTree :menus="item.children"/> </el-submenu> </div> </template> <script setup lang="ts"> import { defineProps } from "vue"; defineProps({ menus: Array, }); </script> ``` 注意,在上述例子中,当遇到有孩子的项目时,会自动触发新一轮迭代过程直到遍历完整棵树状图为止[^3]. 最后一步是在主应用里引入这个新组建并将之前提到过的 `menuData` 赋予它做参数传入: ```html <!-- App.vue 或者其他页面组件 --> <MenuTree :menus="menuData" /> ``` 这样就完成了一个基于 Vue 3 及 Element UI 的响应式侧边栏导航系统的搭建工作[^2].
阅读全文

相关推荐

<el-menu ellipsis class="el-menu-popper-demo" mode="horizontal" style="max-width: 1200px" active-text-color="#ffffff" :default-active="activePath" router > <el-menu-item index="index">首页</el-menu-item> <el-menu-item index="2" id="product">产品及解决方案</el-menu-item> <el-sub-menu :popper-offset="0" index="walkInto" @click="handleMenuClick"> <template #title>走进兴龙</template> <el-menu-item index="/walkInto#profile">公司简介</el-menu-item> <el-menu-item index="/walkInto#process">发展历程</el-menu-item> <el-menu-item index="/walkInto#news">新闻资讯</el-menu-item> </el-sub-menu> <el-menu-item index="user">用户服务</el-menu-item> <el-sub-menu :popper-offset="0" index="0"> <template #title>招贤纳士</template> <el-menu-item index="campus">校园招聘</el-menu-item> <el-menu-item index="society">社会招聘</el-menu-item> </el-sub-menu> <el-menu-item index="contact">联系我们</el-menu-item> <el-menu-item index="medium">媒体中心</el-menu-item> </el-menu> <script setup> import { useRouter,useRoute } from 'vue-router' import { ref, watch } from 'vue'; const route = useRoute(); const activePath = ref("index"); const updateBreadcrumbItems = (route) => { activePath.value = route.name; }; // 监听路由变化 watch( () => route.path, () => { updateBreadcrumbItems(route); } ); const router = useRouter() function goIndex() { router.push({name: 'index'}); } const handleMenuClick = () => { router.push('/walkInto'); }; </script> 这段代码点击el-sub-menu虽然跳转到了walkInto页面但是走进兴龙没有进行高亮显示 其中子菜单的 index="/walkInto#profile" 为锚点设置点击跳转到walkInto页面id为profile处的位置这个不要进行更改 要如何点击el-sub-menu跳转到walkInto页面同时走进兴龙也进行高亮显示

最新推荐

recommend-type

vue左侧菜单,树形图递归实现代码

在Vue.js中,创建一个可递归的左侧菜单通常涉及到数据结构的理解、组件通信以及条件渲染。本例中,我们看到一个使用Vue实现的多级树形菜单,它主要用于后台管理系统的侧边栏。让我们详细解析一下这个实现过程。 ...
recommend-type

机器人开发教程-ROS 进行 SLAM 建图和机器人运动控制

机器人开发教程——ROS 进行 SLAM 建图和机器人运动控制 环境准备 确保你的开发环境已安装 ROS Noetic 或更高版本,并且安装了适用于 ROS 的 SLAM 和 Moveit2.0 软件包。 创建工作空间和包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src catkin_create_pkg my_slam_package std_msgs rospy roscpp cd ~/catkin_ws catkin_make source devel/setup.bash 启动 SLAM 算法 roslaunch my_slam_package slam.launch 保存地图 rosrun map_server map_saver -f my_map 读取地图 在 my_slam_package/launch 目录下创建 map.launch 文件: <launch> <node name="map_server" pkg="map_server" type="map_server" args="my_map.yaml"/> </launch> 启动地图服务器 roslaunch my_slam_package map.launch 控制机器人运动 使用 teleop_twist_keyboard 包控制机器人运动: rosrun teleop_twist_keyboard teleop_twist_keyboard.py 注意事项 确保激光雷达数据正确发布到 /scan 话题。 根据实际机器人调整 SLAM 参数。 在 RViz 中查看地图和机器人位置。
recommend-type

四川话编程语言。基于Python 3.5+,可与Python模块互相引入。.zip

四川话编程语言。基于Python 3.5+,可与Python模块互相引入。.zip
recommend-type

使用ONNXRuntime部署LSTR基于Transformer的端到端实时车道线检测,包含C++和Python两个版本的程序.zip

使用ONNXRuntime部署LSTR基于Transformer的端到端实时车道线检测,包含C++和Python两个版本的程序.zip
recommend-type

java的基础编程-代码资料

有相关的视频,需要的。可以私信咨询
recommend-type

软件设计师04-17年真题及模拟卷精编解析

知识点: 1. 软考概述:软件设计师是计算机技术与软件专业技术资格(水平)考试(软考)的一种职业资格,主要针对从事软件设计的人员。通过考试的人员可以获得国家认可的专业技术资格证书。 2. 软考真题的重要性:对于准备参加软考的考生来说,真题是非常重要的复习资料。通过分析和练习历年真题,可以帮助考生熟悉考试的题型、考试的难度以及出题的规律。这不仅可以提高答题的速度和准确率,同时也能帮助考生对考试有更深入的了解。 3. 软件设计师考试的科目和结构:软件设计师考试分为两个科目,分别是上午科目(知识水平)和下午科目(应用技能)。上午科目的考试内容主要包括软件工程、数据结构、计算机网络、操作系统等基础知识。下午科目则侧重考察考生的软件设计能力,包括数据库设计、系统架构设计、算法设计等。 4. 历年真题的应用:考生可以通过历年的真题来进行自我测试,了解自己的薄弱环节,并针对这些环节进行重点复习。同时,模拟考试的环境可以帮助考生适应考试的氛围,减少考试焦虑,提高应试能力。 5. 模拟卷的作用:除了历年的真题外,模拟卷也是复习中不可或缺的一部分。模拟卷可以模拟实际考试的情况,帮助考生熟悉考试的时间安排和题量分布。通过模拟考试,考生可以检验自己的复习效果,查漏补缺,进一步巩固知识点。 6. 软考复习策略:在复习软件设计师真题时,应该制定合理的复习计划,合理分配时间,全面覆盖所有知识点。同时要注重理论与实践相结合,理解概念的同时要注重实际应用。考生还可以参加一些线上或线下的辅导班,与老师和同学进行交流,解决在复习中遇到的问题。 7. 考试报名及注意事项:考生需要在规定的时间内通过官方网站或者授权的培训机构进行报名。在报名时要注意个人信息的准确性,并在考试前了解具体的考试时间和地点。考生应提前准备考试所需的证件和文具,确保能够顺利参加考试。 8. 软考后的职业发展:通过软考获得专业技术资格证书后,对于软件设计师职业发展有一定的帮助。在求职、晋升以及职称评定等方面,具有国家认可的资格证书往往会增加一定的优势。同时,获得证书也是对个人技术能力的一种肯定,有助于提升个人在行业内的竞争力。 通过以上内容的介绍,可以看出软件设计师真题是备考软考的重要工具,它能够帮助考生全面了解考试结构和内容,检验学习效果,为成功通过软考做好充分准备。对于软件设计师这一职业来说,真题的研究与分析,不仅可以提高考试通过率,也对个人的专业成长有着重要的意义。
recommend-type

QMCA开源在容器化中的实践:Docker与Kubernetes集成秘籍

# 摘要 本文主要介绍了容器化技术在现代软件开发和部署中的重要性,特别是Docker和Kubernetes的技术细节与应用。文章首先概述了容器化技术的概况和QMCA开源项目。随后深入探讨Docker容器技术,涵盖了安装配置、镜像管理、网络和数据管理、以及高级功能的实践。接着,本文转向Kubernetes的基础知识和集群管理,包括架构组件、
recommend-type

CAD切地形剖面图

<think>好的,我现在需要帮用户解决如何在CAD中绘制或生成地形剖面图的问题。首先,用户提到了几个引用来源,我需要仔细看看这些引用里有什么有用的信息,然后结合自己的知识来整理步骤。 引用[1]提到使用【图新地球桌面端】的【提取剖面线】功能,生成高程值后用CAD命令绘制。这应该是一个专门软件辅助生成数据,再导入CAD的方法。步骤可能包括提取地形数据,生成CAD命令,然后在CAD中执行这些命令。 引用[2]说CAD绘制剖面图的步骤是先有线条,然后处理。用户可能想知道如何在CAD内部直接操作,比如画线后如何生成剖面。可能需要结合高程数据,或者使用插件。 引用[3]提到AutoCAD Civ
recommend-type

中级Java开发必学:龙果学院Java多线程并发编程教程

标题“Java多线程知识,龙果学院”与描述“Java多线程知识,龙果学院,适合中级Java开发,分小节讲解”向我们明确指出了该资料的主要内容和适用对象。本篇内容将围绕Java多线程及其并发编程展开,提供给中级Java开发者系统性的学习指导。 ### 知识点一:Java多线程基础 - **线程概念**:多线程是指从软件或者硬件上实现多个线程并发执行的技术,每个线程可以处理不同的任务,提高程序的执行效率。 - **Java中的线程**:Java通过Thread类和Runnable接口实现线程。创建线程有两种方式:继承Thread类和实现Runnable接口。 - **线程状态**:Java线程在生命周期中会经历新建(New)、就绪(Runnable)、运行(Running)、阻塞(Blocked)和死亡(Terminated)这几个状态。 - **线程方法**:包括启动线程的start()方法、中断线程的interrupt()方法、线程暂停的sleep()方法等。 ### 知识点二:线程同步机制 - **同步问题**:在多线程环境中,共享资源的安全访问需要通过线程同步来保障,否则会发生数据竞争和条件竞争等问题。 - **同步代码块**:使用synchronized关键字来定义同步代码块,确保同一时刻只有一个线程可以执行该代码块内的代码。 - **同步方法**:在方法声明中加入synchronized关键字,使得方法在调用时是同步的。 - **锁**:在Java中,每个对象都有一把锁,synchronized实质上是通过获取对象的锁来实现线程的同步。 - **死锁**:多个线程相互等待对方释放锁而导致程序无法继续运行的情况,需要通过合理设计避免。 ### 知识点三:线程间通信 - **等待/通知机制**:通过Object类中的wait()、notify()和notifyAll()方法实现线程间的协调和通信。 - **生产者-消费者问题**:是线程间通信的经典问题,涉及如何在生产者和消费者之间有效地传递数据。 - **等待集(wait set)**:当线程调用wait()方法时,它进入与之相关联对象的等待集。 - **条件变量**:Java 5引入了java.util.concurrent包中的Condition接口,提供了比Object的wait/notify更为强大的线程协作机制。 ### 知识点四:并发工具类 - **CountDownLatch**:允许一个或多个线程等待其他线程完成操作。 - **CyclicBarrier**:让一组线程到达一个屏障点后互相等待,直到所有线程都到达后才继续执行。 - **Semaphore**:信号量,用于控制同时访问特定资源的线程数量。 - **Phaser**:一种可以动态调整的同步屏障,类似于CyclicBarrier,但是更加灵活。 ### 知识点五:并发集合和原子变量 - **并发集合**:java.util.concurrent包下提供的一系列线程安全的集合类,例如ConcurrentHashMap、CopyOnWriteArrayList等。 - **原子变量**:如AtomicInteger、AtomicLong等,提供了无锁的线程安全操作,使用了CAS(Compare-And-Swap)技术。 - **锁框架**:如ReentrantLock、ReadWriteLock等,提供了比内置锁更为灵活和强大的锁机制。 ### 知识点六:线程池的使用 - **线程池概念**:线程池是一种多线程处理形式,它预先创建若干数量的线程,将线程置于一个池中管理,避免在使用线程时创建和销毁线程的开销。 - **线程池优势**:重用线程池中的线程,减少创建和销毁线程的开销;有效控制最大并发数;提供定时执行、周期性执行、单线程、并发数控制等功能。 - **线程池的参数**:核心线程数、最大线程数、存活时间、队列大小等参数决定了线程池的行为。 - **线程池的实现**:通过Executors类创建线程池,也可以通过ThreadPoolExecutor直接实例化一个线程池。 ### 知识点七:Java 8并发新特性 - **Stream API**:Java 8引入的Stream API在并行处理数据时非常有用,可以轻松将串行处理转换为并行处理。 - **CompletableFuture**:实现了Future和CompletionStage接口,用于异步编程,简化了线程操作并提供了更细粒度的控制。 - **Lambda表达式**:简化了使用匿名内部类实现事件监听器、比较器等场景,从而间接提升了并发编程的效率。 以上知识点覆盖了Java多线程和并发编程的基本概念、同步机制、线程间通信、并发工具类、原子变量、线程池的使用以及Java 8的新特性等核心内容。对于中级Java开发者而言,这些内容既全面又系统,有助于深入理解并应用Java多线程技术,设计出高效、稳定的应用程序。
recommend-type

QMCA开源版本控制指南:提升代码管理与团队协作效率的策略

# 摘要 本文全面介绍了QMCA开源版本控制系统的相关知识和应用。首先,概述了QMCA的基础知识和代码管理中的基本操作与功能。随后,重点探讨了QMCA在代码合并、分支管理、审核及问题追踪中的优势与应用。接着,分析了QMCA在团队协作中的权限管理、项目管理以