-- 默认是垂直导航,水平导航设置: mode="horizontal" --> <!-- <h3>水平导航</h3> <el-menu mode="horizontal" :default-active="selectedIndex" @select="selected" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="height:50px; width:auto;"> --> <!-- ...
vue3+vite+element-plus, el-menu组件中,刷新页面后,默认激活选中的菜单 el-menu组件属性default-active设置为当前激活route的name el-menu-item组件属性index设置为route的name <el-menurouter:default-active="route_name"><el-menu-item:index="route.name":route="route"><span>{{level_1.page}}</span><...
在上面的示例中,我们使用了 el-menu 和 el-menu-item 来创建了一个水平布局的菜单导航,并且通过指定 default-active 属性来设置默认选中的菜单项,同时也可以通过 select 事件来监听菜单项的选择事件。这样就可以实现一个基本的 el-menu 菜单导航。 3. el-menu 的高级用法 除了基本的用法之外,el-menu 还提供了...
默认状态:展示菜单aaaa,和当前路由匹配,高亮显示。 需求 点击2切换路由参数,更新菜单里的url,并且菜单aaaa仍应高亮显示。 实现 菜单生成代码: <el-menuunique-opened:default-active="activeIndex"router><el-menu-itemv-for="item in menus":key="item.url":index="item.url">{{item.name}}</el-menu-item...
el-menu:左侧菜单内容,常用属性如下。 :default-openeds:默认展开的菜单(针对父节点),通过菜单的 index 值关联。 :default-active:默认选中的菜单(针对叶子结点),通过菜单的 index 值关联。 上述代码表示打开 index 为 1 和 3 的父菜单,默认选中 index 为 3-4-1 的叶子结点。
</el-menu-item> </el-menu> </el-aside> <el-main> <!-- 结果展示在这里 --> <router-view></router-view> </el-main> </el-container> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.
例如,你可以设置一个默认的垂直导航栏,并在屏幕宽度足够大时切换到水平布局: vue <template> <el-menu :mode="isMobile ? 'vertical' : 'horizontal'" :default-active="currentPath" router @select="selectedMenu" :collapse="isMobile" style="border-bottom: none;"> <!-- 菜单项 ...
Menu Attributes# 属性名说明类型可选值默认值 mode菜单展示模式stringhorizontal / verticalvertical collapse是否水平折叠收起菜单(仅在 mode 为 vertical 时可用)boolean—false ellipsis是否省略多余的子项(仅在横向模式生效)boolean—true ellipsis-icon2.4.4自定义省略图标 (仅在水平模式下可用)string | Component——...
el-menu-item 的 route 属性生效需要 设置 router=“ture” el-tag 关闭图标 需要 deep 修改样式 el-tree 透明背景 避免悬停选中白底 // sass.el-tree{background-color: transparent;color:#a4adce; :deep(.el-tree-node__content:hover), :deep(.el-tree-node:hover) ...
在上面的例子中,我们通过ElMenu组件构建了一个简单的导航菜单。其中,ElMenuItem表示菜单项,ElSubmenu表示子菜单项。通过设置index属性,可以指定每个菜单项的唯一标识。通过设置default-active属性,可以指定默认选中的菜单项。 自定义主题 Element Plus 的侧边栏组件支持自定义主题,在官方提供的主题基础上进行修改和扩展。