美文网首页
el-menu 取消当前选中状态

el-menu 取消当前选中状态

作者: 天亮前被寻找的一只猫 | 来源:发表于2019-12-16 10:50 被阅读0次

    场景描述: 比如我们的home首页(父路由) 是一个 el-menu 的菜单栏。 同时,导航头部有一个反馈意见建议的按钮。 点击这个按钮的时候,希望左侧的菜单栏取消选中,并折叠。

    如图: 点击1 的时候 , 2 取消选中,父菜单折叠。

    菜单.jpg

    因为该操作都是在home页面中处理的,所以不涉及到跨页面数据传递的问题,如果有需要处理成全局的,请使用vuex 进行配置。

    <el-menu ref="elMenu">
    当我们当即1按钮时, 打印 this.$refs.elMenu 可以看到如下的数据

    1576464541834.jpg

    废话不多说,直接上代码:
    // 折叠当前展开的菜单栏。

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

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

     this.$refs.elMenu.activeIndex = null
    

    相关文章

      网友评论

          本文标题:el-menu 取消当前选中状态

          本文链接:https://www.haomeiwen.com/subject/pumrnctx.html