vue element ui NavMenu 导航菜单无法选中

使用element ui的NavMenu 时,导航不能选中当前的激活的菜单

这是要实现的样子

官方文档上记载的是这样,正常使用是没有问题的

然后下面是我的代码

怎么都选不中

然后我觉得可能是我传了参数的原因,因为这个el-menu-item 的index要和这个路由保持一致,而$route.path取出来的路由是不带参数的,于是我改成了这样

把:default-active="$route.path" 改成了:default-active="$route.fullPath" ,这时候就是有的有选中状态  有的没有(我到现在我也不知道为什么是这样o(╥﹏╥)o。。。。),然后我就不纠结了换了种写法,直接把路由写成数组,循环上去,就可以了。

按理来说第一种写法和后面的本质上 得到的数据是一样的啊,我也不知道为什么是这样o(╥﹏╥)o。。。,但是总算解决了

(现在我又测试了一下,第一种也没问题。。。。不知道为啥开始做的时候不行。。。。。懵。。。)

要修改 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、付费专栏及课程。

余额充值