当前位置：首页 > news >正文

Element 问题：解决 el-menu 收缩不完全问题

news 2025/10/11 9:54:29

文章目录

- 问题
- 分析
- 解决

问题

el-menu 点击收缩后不能完全收回去，如图所示

在这里插入图片描述

分析

大家可以拿代码去试一试

Menu.vue

<template><el-menu:collapse="false"class="menu"@open="open"@close="close"background-color="#304156"text-color="#B7C3D1"active-text-color="#409EFF"><menu-item :menu="menu" :deep="1"></menu-item></el-menu>
</template>
<style scoped>.menu{text-align: left;}
</style>
<style>.menu:not(.el-menu--collapse){width: 200px;min-height: 400px;}
</style>

MenuItem.vue

<template><div class="menu-item" :class="{'child-item':deep>1}"><template v-for="item in menu"><el-menu-item class="test1" :index="item.MENU_ID" v-if="!item.children">{{item.MENU_NAME}}</el-menu-item><el-submenu :index="item.MENU_ID"  v-else ><template slot="title"><i class="el-icon-share" v-if="deep===1"></i><span> {{item.MENU_NAME}}</span></template><menu-item v-if="item.children" :menu="item.children" :deep="deep+1"></menu-item></el-submenu></template></div>
</template>
<style>.menu-item{}.child-item .el-menu-item{background-color: #1F2D3D!important;}.child-item .el-menu-item:hover{background-color: #001528!important;}.child-item .el-submenu__title{background-color: #1F2D3D!important;}.child-item .el-submenu__title:hover{background-color: #001528!important;}
</style>

解决

修改css：当菜单收缩时element会给菜单添加el-menu–collapse类，这时候把文字和下拉图标隐藏掉即可

.el-menu--collapse .el-submenu__title span{height: 0;width: 0;overflow: hidden;visibility: hidden;display: inline-block;}.el-menu--collapse .el-submenu__icon-arrow{display: none;}