el-menu default-active默认选中后切换菜单后不会取消高亮

使用el-menu遇到的坑

标签的写法,sidebar-item是一个子组件,遍历菜单详细信息的

		<el-menu mode="vertical" :default-active="$route.path" :default-openeds="openeds">
			<sidebar-item :routes="menus"></sidebar-item>
		</el-menu>

sidebar-item 页面:

<template v-for="item in routes">

			<router-link v-if="item.children==null &&item.pid==menuID" :to="item.url">
				<el-menu-item :index="item.id+'/'+item.name" class='submenu-title-noDropdown'>
					<svg-icon v-if='item.icon' :icon-class="item.icon"></svg-icon><span slot="title">{{item.name}}</span>
				</el-menu-item>
			</router-link>
			<el-submenu :index="item.id+'/'+item.name" v-if="item.children ">
				<template slot="title">
					<svg-icon v-if='item.icon' :icon-class="item.icon"></svg-icon><span>{{item.name}}</span>
				</template>
				<template v-for="child in item.children" v-if='item.children '>
					<router-link v-if="child.show == 1" :to="child.url">
						<el-menu-item :index="child.id+'/'+child.name">
							<span>{{child.name}}</span>
						</el-menu-item>
					</router-link>
				</template>
			</el-submenu>
</template>

问题出现的地方是这里:这个index是菜单的key,一定不能是空,或者只是父级路由地址,比如:/topMenu
而children路由里的 path设为“”,设为空的目的是进来主菜单后,默认跳转到path: “”的页面上,这就导致了,这个菜单会一直高亮,不管选中其它任何菜单都不会改变这个菜单的高亮属性

解决办法

修改子菜单路由地址,不要设为空“”

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现el-menu二级菜单选中后一级菜单高亮,可以通过以下步骤: 1. 在el-menu组件上设置default-active属性,将一级菜单默认选中项设置为需要高亮的一级菜单。 ```vue <el-menu default-active="home"> <!-- 菜单项 --> </el-menu> ``` 2. 在二级菜单el-menu-item-group中使用index属性绑定一级菜单的值,当二级菜单选中时,通过index将选中项的值传递给一级菜单进行高亮。 ```vue <el-menu default-active="home"> <el-menu-item group-title="Home" index="home">首页</el-menu-item> <el-menu-item-group title="分类"> <el-menu-item index="food">美食</el-menu-item> <el-menu-item index="travel">旅行</el-menu-item> </el-menu-item-group> </el-menu> ``` 3. 在computed计算属性中定义一个值,当二级菜单选中时将index的值赋给这个属性,在一级菜单的class属性中绑定这个计算属性,并根据是否和选中项的值相等来决定是否高亮。 ```vue <el-menu default-active="home"> <el-menu-item :class="{'active': activeItem === 'home'}" index="home">首页</el-menu-item> <el-menu-item-group title="分类"> <el-menu-item :class="{'active': activeItem === 'food'}" index="food">美食</el-menu-item> <el-menu-item :class="{'active': activeItem === 'travel'}" index="travel">旅行</el-menu-item> </el-menu-item-group> </el-menu> ``` ```javascript exports default { computed: { activeItem() { return this.$route.query && this.$route.query.index } } } ``` 通过以上步骤,当选中二级菜单时,一级菜单对应的项也会高亮显示。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值