因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件的时候,设置公共变量值adminleftnavnum为导航的index,然后在导航所在的组件watch该变量, 设置el-menu的 :active=”adminleftnavnum”,这样基本上就可以实现该效果了。 1、引入扩展库 要使用公共变量,我们先引入vue...
问题出在el-icon元素在title模板内的使用。解决方法是将el-icon移出#title,但el-sub-menu的情况需保持el-icon在内,否则显示异常。调整后的代码使菜单项在展开和折叠状态下均能正确显示图标。 错误示范: <el-menu-item v-if="hasChild(item) == 0":index="resolvePath(item.path)":key="resolvePath(item....
第一,先给el-menu设置一个属性 :default-active="activeIndex" 第二,在数据里写上这个值 data(){ activeIndex:'' } 第三,在mounted里写上它的值 _this.activeIndex=('/')[4]; 大家可以先打印一下('/')的值,再找到对应的。
el-menu 是Element UI 框架中的一个组件,用于创建网站的导航菜单。它支持动态数据绑定,可以通过 Vue 的数据绑定机制将菜单数据传递给 el-menu 组件,从而实现动态生成菜单。 2. 设计多级菜单的数据结构 多级菜单的数据结构通常是一个嵌套的数组或对象,每个菜单项可以包含子菜单项。以下是一个示例数据结构: javascript...
router.addRoute(firstLevelMenu) } 完成這些配置之後,路由就能動態加載瞭,然後取出vuex中存儲的menu生成el-menu vuex中菜單大致如圖 <el-menu router active-text-color="#ffd04b" background-color="#000" class="el-menu-vertical-demo" :default-active="this.$route.path" ...
el-menu-item 就是普通的菜单项 el-submenu 是菜单项里还有子菜单 el-menu-item-group 是菜单项组,就是好几个菜单项有个标题 网络异常,图片无法展示 | index的妙用 建议将每个el-menu-item和el-submenu上加上index的属性。 好处以下: 选中的时候,有高亮的状态 方便设置默认选中的菜单,可以default-active=...
activeIndex: '/' }; }, methods: { handleMenuSelect(index) { this.activeIndex = index; } } }; </script> ``` 2.手动激活: 你也可以手动设置菜单项的激活状态,通过绑定`:default-active`属性或者通过设置`is-active`属性。这样,当菜单项满足激活条件时,`is-active`样式将会生效。 ```html <templa...
activeMenu: '' // 初始化为空字符串或默认激活的菜单项路径 }), actions: { setActiveMenu(path: string) { this.activeMenu = path; } }}); ### 2. 修改 `permission.ts` 文件 在 `src\permission.ts` 中: import { createRouter, createWebHistory } from 'vue-router';import { useMenuStore...
active-text-color 是选中的文本颜色 这句话设置选中的背景颜色 .el-menu-item.is-active { background-color: #ccff00!important; } <template><divclass="common-layout"><!--全屏的关键:height:100vh--><el-containerstyle=" height: 100vh"><el-asidestyle="background-color: #191970;"width="200...
1.el-menu上加上@select='selectmenu' 2.methods里面加入selectmenu方法 selectmenu (index, indexPath) { this.activeMenu = index window.localStorage.setItem