elementUI----导航栏（NavMenu）选中样式不发生变化

最新推荐文章于 2023-11-02 21:57:03 发布
最新推荐文章于 2023-11-02 21:57:03 发布
阅读量2.3k 收藏
点赞数
分类专栏： ElementUI 文章标签： html css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34626688/article/details/106987915
版权

elementUI----导航栏（NavMenu）选中样式不发生变化

解决办法发：
1）所有的index属性不能缺少在这里插入图片描述
2)所有的index的值是字符串型，也就是说结合Vue的for使用的话要index.toString()或者(index+1).toString()

橙之殇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
给页面导航栏选中栏目添加特殊样式（页面刷新后仍有效）
11-13
给页面导航栏选中栏目添加特殊样式的案例（页面刷新或者跳转到新页面后导航栏的样式仍然有效）
ElementUI样式不显示
qq_54727445的博客
12-21 1347
vue文件运行后，不报错有文本但ElementUI样式不显示
vue element ui NavMenu 导航菜单无法选中
xiaomanonyo的博客
06-09 2001
使用element ui的NavMenu 时，导航不能选中当前的激活的菜单 这是要实现的样子 官方文档上记载的是这样，正常使用是没有问题的 然后下面是我的代码 怎么都选不中 然后我觉得可能是我传了参数的原因，因为这个el-menu-item 的index要和这个路由保持一致，而$route.path取出来的路由是不带参数的，于是我改成了这样 把:default-active="$route.path"改成了:default-active="$route.fullPath" ,这时候.
elementui 菜单选中优化
朝花夕拾的博客
09-20 1258
【代码】elementui 菜单选中优化。
element-UI 左侧菜单栏保持刷新后还是选中状态
mentalitys的博客
06-10 1001
刷
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
最新版ElementUI-web-Axure组件库
03-12
2. **页面模版**：预设的页面模板可以帮助设计师快速搭建常见的页面布局，如导航栏、侧边栏、表单等，节约设计时间。 3. **统计图**：统计图组件包括饼图、柱状图、折线图等多种图表，可用于展示数据和分析结果，...
vue-admin-template配置快捷导航的代码（标签导航栏）
10-14
主要介绍了vue-admin-template配置快捷导航的方法（标签导航栏），本文通过实例代码给大家介绍的非常详细，对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui使用导航栏跳转路由的用法详解
10-18
今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
WordPress主题Green-Park-2导航栏修改技巧
09-29
Green-Park-2是一款受欢迎的WordPress主题，但有时用户可能会发现其导航栏功能不能满足个性化需求，比如默认显示的是页面链接而非分类目录。本文将详细介绍如何通过简单修改Green-Park-2的主题文件来实现自定义导航...
elementui导航栏的使用和选中状态保持，以及重复点击报错
qq_42023279的博客
07-14 914
话不多说，直接开干 首先是引入elementui，根据项目需求，可以全局和局部引入，引入方法就不说了，看官网elementui官网 下面是代码格式: <el-menu v-if="JSON.stringify(menu) != '[]'" :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @clo
修改el-menu样式
最新发布
qq_50386946的博客
11-02 1820
【代码】修改el-menu样式。
vue中使用element-ui 菜单栏(el-menu)点击双击两次才高亮的bug
qq_43631605的博客
06-08 2757
原因：default-active和index属性不一致导致的解决方法：使用路由的name属性设置给index和default-active
NavMenu 导航菜单导航样式修改
sx_lidan的博客
09-03 4581
样式修改，希望可以帮到大家。 .el-menu-demo { background: none; } .el-menu--horizontal > .el-submenu .el-submenu__title, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title, .el-submenu__title i { color: #fff; } .el-menu--horizontal > .el-submenu.i
elementui中导航menu高亮变色问题
脑瓜疼儿的博客
12-19 1万+
elementui中导航menu高亮变色问题 &amp;lt;el-menu-item-group title=&quot;分组2&quot;&amp;gt; &amp;lt;el-menu-item index=&quot;1-3&quot;&amp;gt;选项3&amp;lt;/el-menu-item&amp;gt; &amp;lt;/el-menu-item-group&am
ElementUI之侧边导航栏样式修改
m0_56409834的博客
08-26 5234
elementUi的导航栏样式更改
elementUI中的侧边栏去除白色边框
明耀的博客
01-03 1300
我们在使用elementUI组件库的el-menu组件时，会发现右侧有白色边框。通过以下样式即可去除白色边框。
element的导航栏修改其选中时颜色的问题
热门推荐
Beam
06-06 2万+
修改element导航栏选中时的背景色，通过浏览器选中导航栏查看可知修改样式.el-menu-item.is-active即可。 于是…… .el-menu-item.is-active { background: #247bb4 !important; } 以为完事了吗？ 不不不 正常使用时效果确实达到了 但是长时间闲置页面，再回头看这个页面时会出现 哪里来的灰色？？？ 鼠标点击界面任...
element导航栏修改悬停及选中样式
weixin_48111439的博客
11-27 1万+
Element -导航栏修改悬停及选中样式 element导航栏修改悬停及选中样式 **修改导航栏样式时el-menu-item和el-submenu有区别 el-menu-item在scoped中设置值是可以的，而el-submenu在scoped中设置值不起作用 原效果 el-menu-item部分 <style lang="less" scoped> .el-menu-demo { height: 92px; font-weight: bold; } //设置了行高和字体大小、高
element-ui导航栏不点击
07-27
要解决Element UI导航栏不点击的问题，可以按照以下步骤进行排查和修复： 1. 确保已正确安装Element UI并在main.js中引入了Element UI组件库。可以使用npm安装Element UI，并在main.js中使用import语句引入Element UI。 2. 检查导航栏组件的代码，确保正确引入了导航栏组件。可以在Index.vue文件中使用import语句引入导航栏组件，并在components属性中注册导航栏组件。 3. 检查导航栏的样式设置。可以调整导航栏的宽度、高度、默认颜色等样式设置，确保导航栏的样式符合预期。 4. 检查导航栏的数据设置。可以设置导航标题，并在Vue页面中引入数据，使用循环生成导航栏。 5. 检查导航栏的点击跳转路由设置。确保导航栏的每个菜单项都设置了正确的路由跳转。 如果以上步骤都没有解决问题，可以参考引用\[3\]中提供的参考链接，查看Element UI导航栏的相关文档和示例，以获取更多帮助和解决方案。 #### 引用[.reference_title] - *1* [Element ui侧边导航栏的使用笔记](https://blog.csdn.net/m0_56262444/article/details/117391813)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue2+element-ui创建顶部导航栏及下拉菜单](https://blog.csdn.net/Sebastien23/article/details/125524741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Elementui中El-menu导航栏](https://blog.csdn.net/qq_40323256/article/details/125212606)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值