vue3、element-plus递归实现动态菜单

vue3、element-plus递归实现动态菜单

  • 使用场景:动态菜单
  • 为什么使用递归
  • 递归在动态菜单中的实现

使用场景:动态菜单

动态菜单是指菜单项的数量和层次结构可能是动态的,通常来自后端或用户输入。这些菜单的特征包括:

多层嵌套:菜单可以包含子菜单,甚至更多层的嵌套,形成树状结构。🌳
动态数据源:菜单的数据可能来自API、数据库或用户输入,导致菜单项的数量和结构可能随时变化。📊
灵活性:递归可以使代码更灵活,可以适应菜单结构的变化而不需要大量代码改动。🔄

为什么使用递归

递归实现动态菜单的原因和优点包括:

简化代码逻辑:当菜单结构多层嵌套时,递归可以大幅简化代码逻辑,使其更易于维护。🧩
可扩展性:递归实现的菜单可以适应不同嵌套深度,不需要特定的代码处理。⚡️
与树状数据匹配:递归在处理树状数据时特别有效,因为它可以逐层遍历。🌲
代码可读性:递归代码通常更简洁,遵循一致的逻辑结构。📖

递归在动态菜单中的实现

为了使用递归实现动态菜单,你需要定义一个递归组件,然后递归处理菜单数据的每一层。下面是递归实现动态菜单的基本步骤:

定义递归组件:创建一个组件,用于处理菜单项。如果菜单项有子项,则递归调用自己。🔄
检测终止条件:确保组件在没有子菜单时停止递归,以避免无限递归。🚫
迭代菜单数据:在顶层组件中,使用循环或v-for遍历菜单数据,并递归生成子菜单。🔁

DynamicMenu.vue

<template><el-menu class="el-menu-vertical-demo"><!-- 递归生成菜单 --><menu-itemv-for="(item, index) in menuData":key="index":item="item":index="index.toString()"/></el-menu>
</template><script lang="ts" setup>
import { ref } from "vue";
import MenuItem from "./components/MenuItem.vue";
const menuData = ref([{label: "Main Menu 1",children: [{label: "Sub Menu 1-1",children: [{ label: "Sub Menu 1-1-1", children: [] },{ label: "Sub Menu 1-1-2", children: [] },],},{label: "Sub Menu 1-2",children: [{ label: "Sub Menu 1-2-1", children: [] }],},],},{label: "Main Menu 2",children: [],},
]);
</script><style lang="scss" scoped></style>

./components/MenuItem.vue

<template><el-sub-menu v-if="hasChildren" :index="props.index"><template #title>{{ props.item.label }}</template><menu-itemv-for="(child, childIndex) in props.item.children":key="childIndex":item="child":index="`${props.index}-${childIndex}`"/></el-sub-menu><el-menu-item v-else :index="props.index">{{ props.item.label }}</el-menu-item>
</template><script lang="ts" setup>
const props = defineProps({item: {type: Object,default: {},},index: {type: String,required: true,},
});const hasChildren = props.item.children && props.item.children.length > 0;
</script><style lang="scss" scoped></style>

在这里插入图片描述
这个示例展示了递归组件如何递归处理菜单的嵌套结构。如果有子菜单,继续递归;没有子菜单则显示菜单项。这样,你可以灵活地构建动态菜单,并支持多层嵌套。🎉

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

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

相关文章

真渗透小结

sql 有框就测 关注和数据库有交互的参数&#xff0c;如查询用户信息时的id字段 xss 有框就测 文件上传 有上传点就测&#xff0c;如头像上传文件上传 csrf 有功能点就测&#xff0c;例如增删改查 要看数据包参数的 文件包含 rce ssrf xxe 反序列化 数据包关注 网站资源文件…

【webrtc】MessageHandler 3: 基于线程的消息处理:以sctp测试为例

消息处理可以用于模拟发包处理G:\CDN\rtcCli\m98\src\net\dcsctp\socket\dcsctp_socket_network_test.cc 这个实现中,onMessage还是仅对了一种消息进行处理,就是接收则模式下,打印带宽。当然,可能程序有多个消息,分别在不同的onmessage中执行?SctpActor:以一个恒定的速率…

【大语言模型LLM】-基于ChatGPT搭建客服助手(1)

&#x1f525;博客主页&#xff1a;西瓜WiFi &#x1f3a5;系列专栏&#xff1a;《大语言模型》 很多非常有趣的模型&#xff0c;值得收藏&#xff0c;满足大家的收集癖&#xff01; 如果觉得有用&#xff0c;请三连&#x1f44d;⭐❤️&#xff0c;谢谢&#xff01; 长期不…

Springboot实现串口(RS232)控制【最新】

串口通讯协议(RS232)&#xff0c;没记错的话应该是属于物理层协议。这个一般都是用C去写的&#xff0c;但我们开发一个web系统还去依靠其他的&#xff0c;不如直接集成到我们的项目中来。   还是老规矩&#xff0c;代码可以直接cv就用。拒绝强制关注和留坑&#xff01; 目前没…

利用大型语言模型提升个性化推荐的异构知识融合方法

在推荐系统中&#xff0c;分析和挖掘用户行为是至关重要的&#xff0c;尤其是在美团外卖这样的平台上&#xff0c;用户行为表现出多样性&#xff0c;包括不同的行为主体&#xff08;如商家和产品&#xff09;、内容&#xff08;如曝光、点击和订单&#xff09;和场景&#xff0…

C++ 堆结构和堆排序(从顶到底/从底到顶的大顶堆)+ 优化

一、堆结构和堆排序 &#xff08;1&#xff09;heapInsert&#xff0c;向上调整大根堆 和 heapify&#xff0c;向下调整大根堆 // i位置的数&#xff0c;向上调整大根堆 // arr[i] x&#xff0c;x是新来的&#xff01;往上看&#xff0c;直到不比父亲大&#xff0c;或者来到0…

LLM系列(2):开源LLM Promp调优之道进阶指南

LLM系列(2):开源LLM Promp调优之道进阶指南 随着大模型在不同领域场景的应用,AI 技术的落地方式也有了很大的颠覆,基于大模型的 AI 技术方案重构已成为当前热点和未来趋势。但另一方面,面向不同领域场景构建行业专属大模型,对底层计算资源要求比较高,通常需要大量的 GPU…

升级cmake

要升级CMake&#xff0c;您可以按照以下步骤进行操作&#xff1a; 下载最新版本&#xff1a;首先&#xff0c;您需要从CMake官方网站下载最新版本的CMake。他们提供了适用于各种操作系统的安装程序。 卸载旧版本&#xff08;可选&#xff09;&#xff1a;在安装新版本之前&…

使用Gradio搭建聊天UI实现质谱AI智能问答

一、调用智谱 AI API 1、获取api_key 智谱AI开放平台网址&#xff1a; https://open.bigmodel.cn/overview 2、安装库pip install zhipuai 3、执行一下代码&#xff0c;调用质谱api进行问答 from zhipuai import ZhipuAIclient ZhipuAI(api_key"xxxxx") # 填写…

短视频交友系统搭建重点,会用到哪些三方服务?

在搭建短视频交友系统时&#xff0c;为了确保系统的稳定性、安全性和用户体验&#xff0c;通常需要用到多种第三方服务。以下是搭建短视频交友系统时可能用到的关键第三方服务&#xff1a; 云服务提供商&#xff1a;如阿里云、腾讯云等&#xff0c;提供稳定、可扩展的服务器资源…

如何消除SmartScreen“未知发布者”警告?

在互联网高速发展、应用程序遍地开花的当今时代&#xff0c;作为企业&#xff0c;我们通常会开发自己的应用程序来开展自己的业务&#xff0c;以便与客户建立更深入的联系。不少应用程序所有者可能会面临一个难题&#xff0c;那就是用户下载时&#xff0c;系统会弹出SmartScree…

nuxt3项目服务端bulid后在本地浏览的3种方式(nuxi preview、Node.js Server、PM2)

你也许会问有了开发调试本地浏览&#xff0c;为什么还要服务端构建之后在本地浏览&#xff1f; 举个简单例子 在 Nuxt 3 服务端打包中&#xff0c;由于运行环境不同&#xff0c;无法直接访问 process 对象。服务端打包通常是在 Node.js 环境中进行的&#xff0c;而 process 对象…

GO语言核心30讲 进阶技术 (第二部分)

原站地址&#xff1a;Go语言核心36讲_Golang_Go语言-极客时间 一、接口类型的合理运用 1. 接口类型只包含方法&#xff0c;不包含字段。 方法集合就是它的全部特征。 任何数据类型&#xff0c;只要实现了接口的方法集合全部&#xff0c;那么它就是这个接口的实现类型 2. 怎么…

设计模式之代理模式ProxyPattern(六)

一、代理模式介绍 1、什么是代理模式&#xff1f; 代理模式是一种结构型设计模式&#xff0c;它允许为其他对象提供一个替代品或占位符&#xff0c;以控制对这个对象的访问。 2、代理模式的角色构成 抽象主题&#xff08;Subject&#xff09;&#xff1a;定义了真实主题和代…

【java9】java9新特性之模块化

Java9模块化是Java9版本中引入的一个重要特性&#xff0c;通过Java Platform Module System (JPMS)实现。这个特性允许开发者将大型应用程序拆分成相互独立的模块&#xff0c;每个模块包含一组相关的功能和资源。 关键概念与语法 下面是Java9模块化的一些关键概念和语法&…

记一次使用Notepad++正则表达式批量替换SQL语句

目录 一、需求二、解决方案三、正则解析 一、需求 存在如下SQL建表脚本&#xff1a; CREATE TABLE "BUSINESS_GOODS" ( "ID" VARCHAR(32) NOT NULL, "GOODS_CODE" VARCHAR(50), "GOODS_NAME" VARCHAR(100), ... NOT CLUSTER PRIMARY…

selenium之document.querySelector()方法

document.querySelector()方法 1. 常用的三种获取元素的js方式 document.getElementById("");document.getElementsByClassName();document.getElementsByTagName(); var docdocument;var boxdoc.getElementById("box");var libox.getElementsByTagName(…

Ceph PG

概述 为了实现不同存储池之间的策略隔离&#xff0c;以及针对不同用途的存储池指定不同的容灾策略&#xff0c;ceph crush使用中间结构即Placement Group&#xff08;后续均以PG简称&#xff09;将应用数据对象进行映射后&#xff0c;写入OSD本地存储设备。PG也是我们日常运维…

常见的 HTML 标准

常见的 HTML 标准 常见的 HTML 标准发布历史 HTML&#xff08;Hypertext Markup Language&#xff09;有多个版本和标准。以下是一些常见的 HTML 标准&#xff1a; HTML 2.0&#xff1a;于1995年发布&#xff0c;是 HTML 的第一个正式标准。HTML 3.2&#xff1a;于1997年发布…

刷代码随想录有感(50):路径总和

题干&#xff1a; 代码; class Solution { public:bool traversal(TreeNode* node, int count){if(node NULL)return false;if(!node -> left && !node -> right && count 0)return true;if(!node -> left && !node -> right &&…