关于el-menu 多级菜单,常见的问题可能包括: 如何动态更新菜单数据? 可以通过 Vue 的响应式系统来更新 menuData 数组,el-menu 会自动重新渲染以反映更改。 如何处理深层嵌套的菜单项? 使用递归组件是解决深层嵌套菜单项的有效方法。如上例所示,通过递归调用 MenuItem 组件,可以处理任意层级的菜单嵌套。 如何自定义菜单...
el-menu的子元素只有三种情况: el-menu-item 就是普通的菜单项 el-submenu 是菜单项里还有子菜单 el-menu-item-group 是菜单项组,就是好几个菜单项有个标题 网络异常,图片无法展示 | index的妙用 建议将每个el-menu-item和el-submenu上加上index的属性。 好处以下: 选中的时候,有高亮的状态 方便设置默认...
利用el-menu组件生成多级导航菜单 一、已动态获取导航菜单的json数据,将获取的json数据显示成多级导航菜单的形式。可以利用递归调用组件的形式生成多级导航菜单。 二、已知json数据结构如下: const treeDatas = [ { label: '导航1', isActive: true, index: '0', child: [ { label: '导航11', isActive: t...
.menu-left/deep/.el-submenu.is-active.el-menu-item, .menu-left/deep/.el-submenu.is-active.el-submenu__title, .menu-left/deep/.el-menu-item.is-active{ background-color:#4880ff!important; } .menu-left/deep/.el-submenu.is-active{ border-radius:10px; overflow: hidden; } .menu-left/...
1.模拟菜单数据,引入封装组件 <template> <div class="container"> <el-container> <el-header>Header</el-header> <el-container class="container-body"> <el-aside class="menu-container"> <!-- 实现菜单多级分类 --> <el-menu default-active="1-1-1-1" ...
<el-menu-item index="4-4-2">选项2</el-menu-item> <el-menu-item index="4-4-3">选项3</el-menu-item> </el-submenu> --> </el-submenu> <el-menu-item index="5" route="/PP/PP_Energy">能耗统计</el-menu-item> </el-menu>...
<!-- 递归动态菜单 --><myitem:data="menuArr"></myitem></el-menu> js部分 importmyitemfrom"./components/myitem.vue";// 引入递归菜单组件exportdefault{name:"Home",components: { myitem,// 注册一下},data() {return{activeIndex:this.$route.path,menuArr: [...]// 数据是上述我们模拟的数...
Vue3使用递归组件封装El-Menu多级菜单 <template> <aside class="menu"> <el-scrollbar> <el-menu class="menu-main" router :default-active="route.path" unique-opened background-color="#18214C" text-color="#fff"> <menuItem v-for="item in menuList" :item="item" :key="item.path" />...
},// 设置默认展开菜单项openedsArr() {// const arr = this.menuData.map((item) => {// return item.title;// });// return arr;return[]; }, }, };</script> AI代码助手复制代码 判断高亮状态的activeMenu方法中的判断matchPath属性可以让多个路由不同的页面匹配同一个菜单高亮状态,因为菜单高亮...
.menu-left:deep(.el-menu-item.is-active) { color:#ffffff!important; background-color:#243158; } </style> 2. 子菜单组件(递归主体): LeftSubMenu.vue <template> <templatev-for="item in menuData"> <el-sub-menu :key="item.path" ...