您可以将菜单项放置在左边或右边。 侧栏# 垂直菜单,可内嵌子菜单。 通过el-menu-item-group 组件可以实现菜单进行分组,分组名可以通过 title 属性直接设定,也可以通过具名 slot 来设定。 Default colors Navigator Two Navigator Three Navigator Four Custom colors ...
这样菜单栏就不需要单独维护,只需要维护路由规则就行了。 上面第一块代码,概要的页面,component:Layout它是全局导入的方式,它就是整体布局。icon就是侧边栏的icon,这里就是整体布局。 下面有children,它也是有子的pass,也是叫home。这里面写了它的名字,它的icon,还有它正真的一个页面。 在整体布局下面有一个chil...
<el-icon><location /></el-icon> 主菜单一 </template> <el-menu-item-group> <el-menu-item index="1-1">子菜单一</el-menu-item> <el-menu-item index="1-2">子菜单二</el-menu-item> </el-menu-item-group> </el-sub-menu> <el-menu-item index="2"> <el-icon><icon-menu /><...
子菜单内部可以使用 `<el-menu-item>` 来添加菜单项。 5. 样式设置:可以通过内联样式或外部样式表来设置菜单的样式。Element-Plus 提供了一系列的 CSS 类来帮助开发者快速设置菜单的样式。 三、总结 Menu 组件是 Element-Plus 中最常用的组件之一,它提供了简单的方式来创建不同类型的菜单。通过使用 Menu 组件,...
2. 子菜单组件(递归主体): LeftSubMenu.vue <template> <templatev-for="item in menuData"> <el-sub-menu :key="item.path" v-if="item.children && item.children.length > 0" :index="item.path" :class="item.icon ? '' : 'noIcon'" ...
动态渲染多级嵌套菜单 点击菜单跳转页面 子菜单高亮,对应父级菜单也高亮 不同路由高亮同一菜单 1.2源码 地址:https://gitee.com/YanaDH/vue3-element-template/tree/master 路径: src/layout/components/sidebar/menu 2 sub-menu 组件 <template> <el-sub-menu :index="menu.name" v-if="menu.childMenu"> ...
四个子菜单,没有分组 Main 配置嵌套路由: constrouter =createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes: [ path :'/', name :'home', component :() =>import('../views/layout/IndexView.vue'), children : [//嵌套路由{ ...
来到layout/components/sidebar.vue中处理菜单选择事件 其中getPath 中d参数代表当前菜单的父菜单和子菜单 index 的数组,即父菜单的 path 和子菜单 path,如['aa','bb'],刚好根据它们进行相应的路由跳转 最后点击子菜单2.1就会发现这个页面被渲染出来了
于是,点击2进行切换的时候直接修改的子项url,没有调用getMenus这个方法。试下: menus[0].url = '/a/' + b + '/xxxx' 结果,菜单aaaa居然真的选中了!!!喜极而泣!!! 切2菜单选中 于是按照这个思路对嵌套菜单进行循环修改,解决了已绑定菜单的动态刷新问题。
近期发现侧边栏的菜单项越来越多,伴随的问题就是点击子菜单展开收起时,肉眼可见的卡顿、迟缓。 二、原因: 随着菜单项数据越来越多,使用el-icon动态加载就会造成卡顿的问题,也就是说每次动态加载都会重新渲染一遍, 那么就极大地影响网页性能,下面是el-icon的动态加载示例: ...