多级侧边菜单(递归)

news/2024/9/29 4:18:09/

在这里插入图片描述

需要编写两个文件 aside-menu.vue 和 menu-item.vue

  1. menu-item.vue
<script setup>javascript">
defineOptions({name: 'MenuItem'})
defineProps({menuList: Array})
</script><template><template v-for="menu of menuList"><!-- 如果当前有子菜单,且子菜单只有一个时 --><el-menu-item v-if="menu.children && menu.children.length === 1" :index="menu.path"><el-icon><component :is="menu?.meta?.icon"></component></el-icon><template #title><span>{{ menu.children[0]?.meta?.title }}</span></template></el-menu-item><!-- 如果当前有子菜单,且子菜单大于一个时 --><el-sub-menuv-if="menu.children && menu.children.length > 1":index="menu.path"><template #title><el-icon><component :is="menu?.meta?.icon"></component></el-icon><span>{{ menu?.meta?.title }}</span></template><!-- 调用自身  此处是重点--><MenuItem :menuList="menu.children"></MenuItem></el-sub-menu><!-- 如果没有子菜单,则显示当前内容 --><el-menu-item v-if="!menu.children || menu.children.length===0" :index="menu.path"><el-icon><component :is="menu?.meta?.icon"></component></el-icon><template #title><span>{{ menu?.meta?.title }}</span></template></el-menu-item></template>
</template><style lang="scss" scoped></style>
  1. aside-menu.vue (menuList在该组件中请求后端接口获取)
<script setup>javascript">
import MenuItem from "./menu-item.vue";defineProps({isCollapse: {type: Boolean,default: true}
})
// 菜单列表
let menuList =[{path: '/',name: 'Layout',redirect: '/home',component: '/views/layout/index',meta: {title: 'Layout',icon: 'HomeFilled',hidden: false},children: [{path: '/home',name: 'Home',component: '/views/home/index',meta: {title: '首页',icon: 'HomeFilled',hidden: false}},]},{path: '/sys',name: 'Sys',component: '/views/layout/index',meta: {title: '系统管理',icon: 'document',hidden: false},children: [{path: '/sys/user',name: 'User',component: '/views/sys/user/index',meta: {title: '用户管理',icon: 'document',hidden: false}},{path: '/sys/role',name: 'Role',component: '/views/sys/role/index',meta: {title: '角色管理',icon: 'document',hidden: false}},]}
]//通过递归 将 menuList 属性hidden为true的菜单及其子菜单过滤掉
function filterHiddenMenu(menuList) {return menuList.filter(menu => {if (menu.children) {menu.children = filterHiddenMenu(menu.children)}return !menu?.mata?.hidden})
}menuList = filterHiddenMenu(menuList)
</script><template><div><el-menu :collapse="isCollapse" :collapse-transition="false"><MenuItem :menu-list="menuList"></MenuItem></el-menu></div>
</template><style lang="scss" scoped>
.el-menu {height: 100%;width: 100%;
}
</style>
  1. 使用我们编写的 aside-menu组件
<script setup>javascript">
import {ref} from "vue";
import AsideMenu from "./aside-menu/index.vue";// 是否折叠菜单,默认折叠
const isCollapse = ref(true)</script><template><AsideMenu :isCollapse="isCollapse"></AsideMenu>
</template><style scoped lang="scss">
</style>

http://www.ppmy.cn/news/1531766.html

相关文章

onload_tcpdump命令抓包报错Onload stack [7,] already has tcpdump process

最近碰到Onload 不支持同时运行多个 tcpdump 进程的报错&#xff0c;实际上使用了ps查询当时系统中并没有tcpdump相关进程存在。需要重启服务器本机使用onload加速的相关进程后才能使用onload_tcpdump正常抓包&#xff0c;很奇怪&#xff0c;之前确实没遇到这样的问题&#xff…

【Springboot入门- 事务】

基础理解 基本概念 事务&#xff1a;是一组原子性的数据库操作&#xff0c;要么全部成功&#xff0c;要么全部失败。ACID&#xff1a;事务需要满足原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Isolation&#xf…

Day101 代码随想录打卡|动态规划篇--- 分割等和子集

题目&#xff08;leecode T416&#xff09;&#xff1a; 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 方法&#xff1a;本题是一道01背包的应用题&#xff0c;需要将题目转化为01背包的形式。…

WordPress 要求插件开发人员进行双因素身份验证

全球超过40%的网站由 WordPress 提供支持&#xff0c;其庞大的插件和主题生态系统在全球范围内提供了灵活性和定制性。然而&#xff0c;这种受欢迎程度也使其成为网络攻击的主要目标。 WordPress 将为所有插件和主题开发人员引入强制性双因素身份验证 (2FA)&#xff0c;以应对…

每日一练算法题(使用栈完成回文判断)

回文是指正读反读均相同的字符序列&#xff0c;如“abba”和“abdba”均是回文&#xff0c;但“good”不是回文。试写一个算法判定给定的字符串是否为回文。 函数接口定义&#xff1a; int IsPalindrome(char s[]); //判断字符串s是否回文。 其中 s 是用户传入的参数&#…

【Python】多个dataframe存入excel的不同的sheet表里,而不会被覆盖的方法

我发现&#xff0c;我原来用的多个工作簿存入的方法&#xff0c;发现不太可行&#xff0c;如果我用原来的方法&#xff0c;然后for循环&#xff0c;新的dataframe会把原来的覆盖掉&#xff0c;然后只剩下一个工作薄。原先的代码&#xff1a; with pd.ExcelWriter(file_name ) …

备考中考的制胜法宝 —— 全国历年中考真题试卷大全

在中考这场重要的战役中&#xff0c;每一分都至关重要。为了帮助广大考生更好地备考&#xff0c;我们精心整理了这份全国历年中考真题试卷大全&#xff0c;旨在为大家提供最全面、最权威的备考资料。 文章目录 1. 全科覆盖&#xff0c;无遗漏2. 历年真题&#xff0c;权威可靠3.…

feign的全局拦截器和局部拦截器

拦截器和过滤器在java中用的最多的应该是处理一些head头&#xff0c;进行鉴权&#xff0c;签名等处理。feign也不例外。 一、feign全局拦截器 全局拦截器对每个feign客户端都生效 配置这里省略。 全局拦截器定义 package com.vvvtimes.interceptor;import feign.RequestIn…