elementUI中导航菜单，使打开的菜单关闭

广州湾兔老大

已于 2022-08-18 15:29:35 修改

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： elementui遇到的问题文章标签： elementui javascript vue.js

于 2022-07-28 14:43:21 首次发布

本文链接：https://blog.youkuaiyun.com/IT_Dilraba_bin/article/details/126034794

elementui遇到的问题专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在ElementUI中使用MenuEvents的close回调，实现点击首页时导航菜单自动关闭，并随之跳转。通过绑定ref并设置事件处理函数，详细展示了关键代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ElementUI中导航菜单

导航菜单的Menu Events的close回调事件

背景：要实现点击首页，然后导航菜单要收起，然后页面跳转到首页。

给el-menu绑定ref

<el-menu
	ref="menu"
    :default-active="menuActive"
	@open="handleOpen"
>

js事件

// 获取当前打开导航的key
handleOpen(key) {
	this.KeyIndex = key;
},

// 将高亮的menuActive设为空，使用close回调事件，将上面获取的key传入，使得开启的导航菜单关闭
homeClick(){
    this.menuActive = "";
    this.$refs.menu.close(this.KeyIndex);
}