el-menu 绑定路由:跳转到二级路由时保持一级菜单高亮

 需求:在当前菜单项进行操作时,保持一级菜单高亮

 这里代码实现很简单,只需要使用深度选择器 找到el-menu上的is-active,修改相应的样式即可。

//高亮效果
:deep(.el-sub-menu.is-active) {
  .el-sub-menu__title.el-tooltip__trigger.el-tooltip__trigger {
    color: #c3292a;
    background-color: #fff !important;
    border-radius: 10px 0px 10px 0px;
  }
}

但是这样设置有一个问题,当我们跳转到二级路由的时候,el-menu就会失去is-active类名,高亮效果也就随即消失。如下图:

解决方案:

        判断当前路由path是否包含el-menu router中的path。使用到字符串的match方法。并设置一个拥有高亮效果的类。核心在于 route.path.match(menu.path)

代码:

          <el-sub-menu 
            :index="menu.path + ''" 
            v-for="(menu, index) in menuList"         
            :key="index"
            :class="{ isActive: route.path.match(menu.path) }">
            ...    
          </el-sub-menu>
:deep(.isActive) {
  .el-sub-menu__title.el-tooltip__trigger.el-tooltip__trigger {
    color: #c3292a;
    background-color: #fff !important;
    border-radius: 10px 0px 10px 0px;
  }
}

这样就实现高亮了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现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 } } } ``` 通过以上步骤,当选中二级菜单一级菜单对应的项也会高亮显示。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值