elementui组件中取消el-menu的选中状态

链接:https://www.jianshu.com/p/c2b6a6152ce9

// 折叠当前展开的菜单栏。

 this.$refs.elMenu.closeMenu(this.$refs.elMenu.openedMenus[0])

// 取消菜单栏的当前选中状态。

 this.$refs.elMenu.activeIndex = null

我的开发中有个需求是当前el-menu-item选中打开路由页面时是选中状态,在关闭当前打开的路由页面恢复导航栏el-menu-item未选中的状态;

接下来上代码来进行实现...............

 1.这是关闭路由页面后会跳转到首页而el-menu-item还是选中的状态,现在要将他选中的状态取消掉

2.使用watch 监听路由的变化,判断当跳转到首页时恢复未选中状态

选给el-menu一个ref     <el-menu ref="elMenu">

watch:{
    // 取消导航栏的选中状态
    $route:{
      handler(val,oldval){
        console.log(val);//新路由信息
        console.log(oldval);//老路由信息
        if(val.name=='smViewer'){
           this.$refs.elMenu.closeMenu(this.$refs.elMenu.openedMenus[0]);
           this.$refs.elMenu.activeIndex = null
        }
      },
      // 深度观察监听
      deep: true
    }
  },

 结果:

 

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
您好,关于您的问题,可以使用el-menu的selected属性来实现点击一个激活另一个的效果。具体来说,当一个菜单项被选中时,可以将其对应的key值存储在一个变量,然后将其他菜单项的selected属性设置为false,将被点击的菜单项的selected属性设置为true,这样就可以实现只有一个菜单项处于激活状态的效果。以下是示例代码: ```html <template> <el-menu :default-openeds="['1']" class="el-menu-vertical-demo" :selected="selected"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group title="分组一"> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> <el-menu-item index="1-4">选项4</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span>导航二</span> </template> <el-menu-item index="2-1">选项5</el-menu-item> <el-menu-item index="2-2">选项6</el-menu-item> <el-menu-item index="2-3">选项7</el-menu-item> <el-menu-item index="2-4">选项8</el-menu-item> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-document"></i> <span>导航三</span> </template> <el-menu-item index="3-1">选项9</el-menu-item> <el-menu-item index="3-2">选项10</el-menu-item> <el-menu-item index="3-3">选项11</el-menu-item> <el-menu-item index="3-4">选项12</el-menu-item> </el-submenu> </el-menu> </template> <script> export default { data() { return { selected: "1-1" // 初始化选中项为选项1 }; } }; </script> ``` 在上述代码,我们通过设置selected属性来指定初始化选中的菜单项。可以根据具体需求再进行进一步的修改和扩展。希望这可以帮到您,谢谢!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值