element-UI配置多层级菜单

入口文件：

<template>
  <div class="menu" id="menu">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <menuItem v-for="item in menuList" :key="item.id" :data="item" class="horizontal-item"/>
    </el-menu>
  </div>
</template>

<script>
import menuItem from './menuItem';
export default {
  name: 'menu',
  components: {menuItem},
  data () {
    return {
      activeIndex: '',
      menuList: [
        {
          id: 232,
          name: '菜单栏目1',
          isAdmin: true
        },
        {
          id: 323,
          name: '菜单栏目2',
          isAdmin: true
        },
        {
          id: 32311,
          name: '菜单栏目3',
          isAdmin: true,
          children: [
            {
              id: 123443321,
              name: '菜单栏目3-1',
              isAdmin: true
            },
            {
              id: 123433221,
              name: '菜单栏目3-2',
              isAdmin: true
            }
          ]
        },
        {
          id: 1,
          name: '菜单栏目4',
          isAdmin: true,
          children: [
            {
              id: 2,
              name: '菜单栏目4-1',
              isAdmin: true
            },
            {
              id: 3,
              name: '菜单栏目4-2',
              isAdmin: true,
              children: [
                {
                  id: 4,
                  name: '菜单栏目4-2-1',
                  isAdmin: true,
                  children: [
                    {
                      id: 42,
                      name: '菜单栏目4-2-1-1',
                      isAdmin: true
                    },
                    {
                      id: 53,
                      name: '菜单栏目4-2-2-2',
                      isAdmin: true
                    }
                  ]
                },
                {
                  id: 5,
                  name: '菜单栏目4-2-2',
                  isAdmin: true
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleSelect () {}
  }
};
</script>

<style lang="less">
  #menu {
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out,
                  0s padding-left ease-in-out,
                  0s padding-right ease-in-out;
    }
    .is-horizontal {
      display: none;
    }
    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }
    .horizontal-item{
      float: left;
      width: 100px;
    }
  }
</style>

菜单组件：

<template>
<div class="menu-item">
  <template v-if="!data.children">
    <el-menu-item :key="data.id" :index="data.id.toString()">{{data.name}}</el-menu-item>
  </template>
  <el-submenu :key="data.id" :index="data.id + ''" v-if="data.children">
    <template slot="title">{{data.name}}</template>
    <template v-for="item in data.children">
      <template v-if="!item.children">
        <el-menu-item :key="item.id" :index="item.id + ''">{{item.name}}</el-menu-item>
      </template>
      <template v-if="item.children && item.children.length > 0">
        <menuItem :data="item" :key="item.id"/>
      </template>
    </template>
  </el-submenu>
</div>
</template>

<script>
export default {
  name: 'menuItem',
  components: {},
  data () {
    return {
      activeIndex: ''
    };
  },
  props: ['data'],
  methods: {}
};
</script>

<style lang="less">
.menu-item{
  .el-menu--popup-right-start{
    margin: 0px;
    margin-top: -5px;
  }
  .is-active {
    & > .el-submenu__title{
      color: #fff!important;
    }
  }
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .el-submenu__icon-arrow{
    display: none;
  }
  .el-submenu__title{
    font-size: 16px;
  }
  .el-submenu {
    .el-submenu__title:hover {
    background:#34404f !important;
  }
  }
  .el-menu-item:hover {
    background:#34404f !important;
  }
}
.el-menu {
  .el-menu-item:hover {
  background:#34404f !important;
}
}
.el-menu-item,
.el-submenu__title {
  padding:0 10px;
  text-align: center;
}
.el-menu--horizontal {
  .el-menu {
    .el-menu-item,
    .el-submenu__title {
      height: 50px;
      line-height: 50px;
    }
  }
}
.el-menu-item{
  font-size: 16px;
}
</style>