使用element UI导航菜单|展开指定菜单

最新推荐文章于 2025-03-06 09:38:08 发布
最新推荐文章于 2025-03-06 09:38:08 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： #Vue学习 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46499784/article/details/128887459
版权
本文介绍了如何使用Element UI的Menu组件实现导航菜单的展开和收起功能。通过设置default-openeds参数为数组类型，可以控制菜单的默认展开状态。在点击子菜单时，其同级菜单将一同展开。然而，文章提到当切换到其他菜单时，如何收起已打开的子菜单是一个待解决的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

组件 | Element|官方文档icon-default.png?t=N0U7https://element.eleme.cn/#/zh-CN/component/menu#menu-attribute可以先看一下。官方的文档。

 我看了一下，就是说显示菜单用这个参数default-openeds，这个参数是个数组类型。

直接放步骤啦，我也不是很清楚。

能够实现，点击参看哪个子菜单，这个子菜单的兄弟姐妹跟着一起展开显示。

有个缺点，我不知道当切换到别的菜单下，点开的要怎么收起来。：（

最低0.47元/天 解锁文章
element-ui组件的使用，导航菜单（NavMenu）组件、分页组件的使用
嗨皮的博客
02-01 6910
基于vue2项目中elementUI组件的简单使用方法
element ui 菜单封装_vue+element UI实现多级导航菜单
weixin_35740545的博客
02-15 1334
1.前言在某次日常开发中，项目要求页面的导航菜单需要动态加载，即菜单不能在页面上写死，菜单上的数据由后端开发从数据库中获取返回给前端使用，前端拿到数据后再通过解析数据最终将菜单渲染出来。由于菜单有可能是多级的，所以我们需要使用递归的方式，一层一层的递归数据，将多级菜单完整显示出来。本篇博文借助element UI组件库中的Navmenu导航菜单组件，将其进行改造后封装成一个多级导航菜单组件。2.工...
ElementUI浅尝辄止32：NavMenu 导航菜单
渣渣砖
09-06 2059
为网站提供导航功能的菜单。
3.使用ElementUI搭建侧边栏及顶部栏
最新发布
超级小狗的博客
03-06 1506
ElementUI是基于 Vue 2.0 的桌面端组件库。使用之前，需要在项目文件夹中安装ElementUI，在终端中输入以下命令，进行安装。 并在main.js中引入ElementUI App.vue HomeView.vue Aboutview.vue 2.2 拷贝elmentUI布局样式到App.vue 在 ElementUI上找到下面的实例以及对应的代码。 **注意：**把代码放在的上面。 运行样式效果如下： 上面的样式与浏览器有间隙，需要创建一个global.css用于写全局样式。截图如下：
使用Element UI导航菜单默认展开子菜单
qq_51196135的博客
12-27 8571
⚠️这里 index的属性值由中定义，将想要展开的菜单目录的index值写在数组openeds即可。2、openeds 是默认展开菜单的 的index属性的值的集合，是一个数组。4、index最终值（onlyOneChild.path）实现效果：登陆项目即自定义展开菜单均展开显示！1.需要给 添加属性。
ElementUI之首页导航&左侧菜单
theHider的博客
07-27 1722
部分代码实现如下：</</</
element-ui导航菜单
yu_ri168的博客
12-24 369
一二三级菜单跳转
element-ui 设置菜单栏展开的方法
10-18
在使用Element UI构建Vue项目时，我们经常会遇到需要设置菜单栏展开状态的需求，以便为用户展示特定的菜单项。Element UI是一个基于Vue 2.0的桌面端组件库，其中的el-menu组件可以帮助我们实现侧边栏菜单的功能。...
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
element-ui使用导航栏跳转路由的用法详解
12-29
最近初学vue，试着做一个小项目熟悉语法与思想，其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程 element-ui引入vue项目的用法参考element官网 首先复制官网的例子，在这基础上再修改成我们想要...
Elementui中El-menu导航栏
06-09 1万+
el-menu官方文档：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/menu 导航栏水平时去除底部白边： 注意：水平时去除底部白边是用的新添加的style标签实现的。其他方式不行，如用::deep，或者直接在原来的style中改，都不行 侧边栏展开时宽度：
ElementUI之首页导航及左侧菜单（模拟实现）
weixin_74352229的博客
09-26 4745
MockJS 是一款前端开发中常用的模拟数据生成工具，用于在开发过程中模拟接口返回数据。它可以帮助前端开发人员独立于后端接口进行开发和调试，提高开发效率。MockJS 提供了一套简单却强大的 API，可以根据指定的规则生成随机的模拟数据。通过MockJS，开发者可以定义接口的返回结构、数据类型以及各种约束条件，例如字符串长度、数字范围、日期格式等，从而模拟真实的接口返回结果。MockJS 的使用非常灵活，可以配合其他前端框架（如 Vue、React、Angular）或纯 JavaScript 进行集成。
elment-ui菜单栏
qq_41126936的博客
05-12 558
问题/需求/bug描述 需求：菜单栏中高亮（激活）当前页面的菜单 bug：element-ui官网中高亮菜单栏的话要双击才行。但是实际项目中单击后高亮菜单是最符合用户感受的 解决 更改菜单 el-menu中的:default-active属性为$route.path 效果 引用：https://www.jianshu.com/p/85a1590d9309 注： 自己将属性:default-active改为$router.currentRoute.name这个方法改不到这个效果 ...
element-ui菜单el-menu的使用
m0_63040701的博客
05-28 2万+
el-menu详解。
Element -Ui之NavMenu导航栏
m0_50007683的博客
05-03 1万+
一、NavMenu重要标签和参数说明 mode：导航栏的模式，默认值vertical 导航栏处于垂直状态，改为horizonta可变为水平模式。 index：唯一标志。 default-active：激活当前菜单的index。 router： 是否使用路由，启用后可以通过index作为地址进行跳转。 <el-menu-item index="1">导航栏中的子菜单标签。 <el-submenu> 生成二级菜单。 代码实现..
vue结合Element UI如何实现点击左侧菜单的折叠与展开
热门推荐
浮生离梦的博客
02-06 2万+
一、Element UI 中菜单的折叠与展开 在Element UI中的官方文档中，在NavMenu 导航菜单中，在Menu Attribute 中，有一个 collapse 属性。它的作用是是否水平折叠收起菜单（仅在 mode 为 vertical 时可用），是一个Boolean类型，默认值为false，我们可以根据这个 collapse 属性，通过设置它的true或者false的值控制菜单的...
Element UI顶部导航栏与左侧导航栏联动实现~
m0_62626838的博客
08-12 870
需求：点击顶部导航栏的不同栏位实现左侧导航栏菜单的不同展示实现联动效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值