el-menu菜单收缩出现bug

Question

element的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>

Answer 1

终于研究明白了

• 网上的解决方法有两种：

1. 利用vue-fragment库，但是这个有bug
   https://blog.csdn.net/pangji0...
2. 使用函数创建menu组件，这个太麻烦了
   https://github.com/d2-projects/d2-admin/blob/master/src/layout/header-aside/components/libs/util.menu.js

• 最终解决办法：修改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;
  }

参考：https://github.com/PanJiaChen...