vue的elementui菜单栏不能对齐

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

img

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

img

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

  • 你可以看下这个问题的回答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绘制登陆表单小节, 巩固相关知识点

调一下样式就好了,这个没啥大问题