vue的elementui菜单栏不能对齐

Question

为什么element-ui的menu不能对齐
这是以前创建的vue项目，我在这个项目里放element-ui的menu代码就能对齐

这个是我新创建的项目，菜单栏文字不同时就不能对齐了，而且显示的位置都不同了，代码都是同一份

我看了下package.json的elementui版本是一样的，不知道这是为什么，我新项目啥也没干，创建完就放了个菜单栏组件
请问有谁知道吗

Answer 1

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7626002
• 这篇博客你也可以参考下：vue+elementui 项目el-menu导航栏实现路由跳转及当前项的设置
• 除此之外, 这篇博客: 如何用递归写element-ui的导航菜单中的 2.在mian.vue组件引入menuSun组件，并且将这个数据传过去 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• <div class="aside">
     <div class="titleWrapper">
        <div class="titleWrap">
        	<svg-icon icon-class="logo" class="logo"></svg-icon>   
        	<transition name="slide-fade">     
           	<span class="logoTitle" v-if="!isCollapse">信息管理系统</span>
        	</transition>
        </div>
  	</div>
  	<el-menu default-active="1" unique-opened class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"  :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      	<menuSun :menuList="menuList.data" :isCollapse="isCollapse"></menuSun>
  	</el-menu>  
  </div>
  

  注意：这里最外面一层不能封装进去，因为后面封装进去的都要递归。

  css:

   .aside{
      height: 100%;
      background: rgb(84, 92, 100);
      .el-menu{
        border: rgb(84, 92, 100);
      }
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        ul{
          width: 200px;
        }
      }
      .titleWrapper{
        height: 60px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        .logo{
          font: 20px/60px '微软雅黑';
        }
        .logoTitle{
          color: #fff;
        }
        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */
        .slide-fade-enter-active {
          transition: all 2s ease;
        }
        .slide-fade-leave-active {
          transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slide-fade-enter, .slide-fade-leave-to {
          transform: translateX(10px);
          opacity: 0;
        }
      }
    }
  

• 您还可以看一下 汤小洋老师的【精品课】Vue.js实现电商后台管理系统（企业项目实战）课程中的 使用ElementUI绘制登陆表单小节, 巩固相关知识点