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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值