<el-submenuv-if="menuData.children && menuData.children.length > 0" :index="menuData.menuId"> <templateslot="title"> {{ menuData.menuDesc }} </template> <MenuItemv-for="item in menuData.children" :key="item.menuId" :menu-data="item" /> </el-submenu> <el-menu-itemv-else :...
接下来在 Main.vue 中动态解析 router,生成菜单,代码如下所示。 <template> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu> <el-submenu v-for="(item,index) in $router.options.routes" :ind...
ElementUI的el-submenu在展开时,其子菜单项通常会包含在.el-submenu__wrap或.el-menu-item-group等类中。但具体哪个类会用于背景颜色的设置可能取决于ElementUI的版本和您的具体实现。为了确定正确的类,您可以使用浏览器的开发者工具来检查el-submenu元素及其子元素。 2. 编写CSS样式 假设您已经确定了需要修改的类...
情况一:单个菜单页面刷新导航失去高亮;(如下图这种菜单类型) 问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :ro...
</template> </template> </el-submenu> </template> <template v-else> <el-menu-item :index="item.id" :key="item.id" @click="goRouter(item.router)" > <template v-if="item.icon"> ...
el-submenu的index 唯一值,必须是字符串,不接收数值。所以转换成字符串的简单方式是在后面拼接一个空字符串 2. 接下来,渲染二级菜单。 2.1 二级菜单的渲染,应该是循环所有一级菜单的children 属性 2.2 二级菜单渲染代码实现 2. 最终效果 3. Home.vue 页面代码 ...
在这个例子中,我们使用了el-menu和el-submenu组件来实现无限级菜单。menuList数组中存储了菜单的数据,包括菜单的名称、路径和图标等信息。如果一个菜单有子菜单,我们使用el-submenu组件来展示它的子菜单,否则使用el-menu-item组件来展示它本身。我们还使用了Vue Router来实现路由跳转。在...
在<el-menu>中需要--:default-active="this.$route.path"。用来绑定路由表 在<el-menu>中需要--router---或者router=true 在<el-submenu>中的index不可缺少,为必须值,不过此处的index仅为索引,用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可 在<el...
elementui submenu路由参数 ElementUI的SubMenu组件不直接支持路由参数。要想在子菜单中传递路由参数,您可以使用ElementUI的MenuItem组件,然后在点击菜单项时,使用编程式导航将参数传递给目标路由。 以下是一个示例: ```vue <template> <el-menu> <el-submenu index="1"> <template slot="title">菜单1</template...
通过绑定:index = index0,点击某个子菜单,对应的菜单才会显示文字颜色改变效果。 所有,出现子菜单相互影响的情况时,注意看是不是忘了设置index属性。最好设置每个子菜单的index不同。 这就是el-submenu 标签中index属性的作用。