vue+elementui项目折叠菜单再展开有白框问题

博主在使用vue+elementui实战过程中制作了一个折叠菜单功能，可以把菜单压缩宽度。但是遇到了一个问题，压缩后再展开的菜单显示有问题，会出现一条白框，如图所示：

这是正常的菜单：

这是折叠后的菜单：

这是再展开的菜单：

可见，再展开的菜单宽度变成了折叠菜单的宽度。原因是在布局上没有控制好菜单的宽度，博主找到了两种解决方案分享给大家：

1. 将v-show属性换成v-if属性

<el-menu
      :default-active="$route.path"
      background-color="#eef1f6"
      text-color="#053343"
      active-text-color="#409EFF"
      unique-opened
      router
      //v-show换成v-if
      v-if="!getCollapse"
    >
    ...
</el-menu>    

这种方法虽然解决了问题，但是由于使用了v-if属性会导致每回折叠菜单菜单栏都会重新加载。不但浪费切换时的时间和性能，而且用户体验并不好。因此，并不推荐使用这种方法解决。

2. 仍旧使用v-show属性,并使用js动态控制菜单宽度

<el-menu
      :default-active="$route.path"
      //增加了id属性
      id="elmenu"
      background-color="#eef1f6"
      text-color="#053343"
      active-text-color="#409EFF"
      unique-opened
      router
      //继续使用v-show
      v-show="!getCollapse"
    >
    ...
    ...
    ...
    //获取菜单并设置宽度
    var elmenu = document.getElementById("elmenu");
    if (elmenu.offsetWidth === 0) {
    	elmenu.style.width = "230px";
    }

这种方法相对于第一种方法就友好许多，由于仍旧使用的是v-show属性，只是简单的基于css控制。因此在切换时性能较好，用户体验感也会强于第一种方法，推荐使用这种方法！