关于element ui中引入官方的NavMenu时出现点击某个子菜单时,所有的子菜单全都展开问题

前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。

问题描述

使用官方代码,为项目添加了多级导航菜单。但是,当我点击某个菜单的某一项时发现,不止当前菜单项的子菜单展开了,所有菜单项子菜单全都展开。

解决方法

这是由子菜单项的index属性引起的,但我们为每个子菜单项的index属性添加相同的值时就会出现这种情况。所以为每个子菜单项添加不同的index属性值就可解决

————————————————
版权声明:本文为CSDN博主「苹果砸醒了逃课的牛顿」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41373791/article/details/109294961

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要修改 Element UINavMenu 导航菜单里面选项的样式,可以使用以下两种方法: 1. 使用 Element UI 提供的样式类 在 NavMenu 组件,每个选项都是一个 el-menu-item 组件,因此你可以使用 Element UI 提供的样式类来修改选项的样式。例如,要修改选项的背景颜色和字体颜色,可以在 CSS 文件添加以下代码: ``` /* 修改选项的背景颜色 */ .el-menu-item.is-active, .el-menu-item:hover { background-color: #f0f0f0; } /* 修改选项的字体颜色 */ .el-menu-item.is-active a, .el-menu-item:hover a { color: #333; } ``` 2. 自定义 NavMenu 组件的模板 如果你需要更复杂的样式修改,可以自定义 NavMenu 组件的模板,在模板添加自己的 CSS 样式。具体操作步骤如下: 1)在 Vue 组件,使用 template 属性自定义 NavMenu 组件的模板,并在模板添加自己的 CSS 样式。例如: ``` <template> <el-menu class="my-nav-menu"> <template v-for="item in menuData"> <el-menu-item :index="item.index" :key="item.index"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </template> </el-menu> </template> <style scoped> .my-nav-menu { /* 自定义 NavMenu 的样式 */ } .my-nav-menu .el-menu-item { /* 自定义 NavMenu 选项的样式 */ } </style> ``` 2)在 Vue 组件的 script 标签,使用 components 属性注册自定义的 NavMenu 组件,并在其他组件使用自定义的 NavMenu 组件。 ``` <script> import { defineComponent } from 'vue'; import MyNavMenu from './MyNavMenu.vue'; export default defineComponent({ name: 'MyApp', components: { 'my-nav-menu': MyNavMenu, }, }); </script> <template> <div> <my-nav-menu :menuData="menuData" /> </div> </template> ``` 通过以上两种方法,你可以灵活地修改 NavMenu 导航菜单里面选项的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值