使用elementui做后台管理系统，el-aside(el-menu)与el-main高度不一的问题，实现el-aside(el-menu)占满整个页面，以及实现多级菜单。

先来看看问题1：（实现el-menu占满整个页面）

这是el-menu没有设置高度出现的问题

这是将el-menu这块高度设置为100vh，出现的问题

最后，解决问题 ，如图

 在App.vue中，添加以下代码

html,body {
      margin: 0;
      height: 100%;
    }

 在布局文件中，也就是在以下文件中，给container类添加戴拿

.container{
        height: 100%
    }

最后，也就是在el-main里面，即TabInner里面添加以下代码

.el-menu{
    height:100%
  }

问题2：实现多级菜单

做法：遍历从父组件传过来的menuData数组数据（菜单栏数据），如果数据里有children属性，则建立一个父级菜单名，并再次循环去判断children属性里的数据，若没有children属性，则当做普通以及菜单处理，若还有children则会继续创建父级菜单名。

完整代码：

在Menu.vue页面

<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    background-color="#1F2D3D"
    text-color="#ffffff"
    router
  >
    <menu-tree :menuData="MenuList"></menu-tree>
  </el-menu>
</template>

<script>
import MenuTree from './MenuTree.vue'
export default {
    components: {
      MenuTree
    },
    data(){
      return {
          MenuList: [
            {index: '/page1',content: '商户信息',},
            {index: '/page2',content: '门店信息',},
            {index: '/page3',content: '终端信息',},
            // {index: '/page4',content: '接口配置',},
            {index: '/page5',content: '门店接口配置',},
            // {index: '/page6',content: '支付渠道',},
            {index: '/page7',content: '签到日志',},
            {index: '/page4',content: '系统参数',children:[
              {index: '/page4',content: '接口配置'},
              {index: '/page6',content: '支付渠道',}
            ]},
          ]
      }
    }
}
</script>

MenuTree组件页面：

<template>
  <div>
    <template v-for="menu in this.menuData">
      <el-submenu :key="menu.index" :index="menu.index" v-if="menu.children">
          <template slot="title">
              <i :class="menu.icon"></i>
              <span slot="title">{{menu.content}}</span>
          </template>
          <menu-tree :menuData="menu.children"></menu-tree>
      </el-submenu>
      <el-menu-item :key="menu.index" :index="menu.index" v-else>
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.content}}</span>
      </el-menu-item>
    </template>
  </div>
</template>
 
<script>
export default {
  props: ['menuData'],
  name: 'MenuTree'
}
</script>