对于 el-sub-menu 组件,你可以查看其是否有提供默认展开的属性。 2. 使用 index 和v-model 绑定 在Element UI 的菜单组件中,你可以通过 index 属性为每一个菜单项(包括子菜单)设置一个唯一的标识,并通过 v-model 绑定当前激活的菜单项的索引值来实现默认展开。
5、active-text-color为选中的菜单的颜色 <el-menu>标签中可以有el-submenu和el-menu-item标签组成 demo <el-menu :router="true" mode="horizontal" background-color="#1c213f" text-color="#fff"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-menu"></i> </template> ...
el-menu的用法如下: el-menu-item是组件元素。 el-menu-item可直接在el-menu中使用。 el-menu-item也可插入元素。 el-menu-item-group是组件组,可包含el-menu-item以及模板插槽。 此外,el-menu还有以下属性: index:唯一标志。 popper-class:为popper添加类名。 show-timeout:展开sub-menu的延时。 hide-time...
组件思路是:el-menu,里面是一会儿将要嵌套的小组件~小组件循环每个路由单项; 组件单项思路(将menu-item抽出来):看el-menu中从有没有子项就分为el-sub-menu和el-menu-item两种:el-sub-menu是右侧有小箭头,代表该项存在子菜单,可展开;el-menu-item没有小箭头,代表没有子菜单; 在menu-item中进行判断,以有无...
.menu-left:deep(.el-sub-menu__title:hover) { background: none; } .menu-left:deep(.el-menu-item), .menu-left:deep(.el-sub-menu__title) { height:36px; margin-bottom:4px; border-radius:4px; color:var(--text-main-color)!important; ...
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" />...
menu-itemv-for="child in item.children":key="child.id":index="child.path">{{ child.name }}</el-menu-item></el-sub-menu><el-menu-itemv-else:index="item.path"><el-icon><setting/></el-icon><span>{{ item.name }}</span></el-menu-item></template></el-menu></el-aside><...
1,找到所有打开的菜单(通过‘el-menu--vertical’找到) 2,排除掉不是div的(会找到一些其他叫这个class的,但是不是我们要的菜单元素) 3,如果我们点击页面其他部位(非打开的菜单),就关闭菜单 listenerElSubment() { document.body.addEventListener('click', function (e) { ...
就是说在el-menu-item中svg-icon这个组件不能写在<template #title>里面,这个确实可以解决一部分问题,但是对于我来说,他没有完全解决我的问题,因此我继续在网上寻找答案。但是都不是很满意,直到我遇到了这个解决方案: .el-sub-menu {// 看csdn上的大佬解决方案,可以解决display: grid;width: 100%;} ...
Bug Type: Component Environment Vue Version: 3.2.20 Element Plus Version: 2.1.4 Browser / OS: Chrome/99.0.4844.74/Mac OS X 10_15_7 Build Tool: Vite Reproduction Related Component el-sub-menu el-menu Reproduction Link Docs CN Steps to rep...