vue2 + element三级菜单实现模板

需求：

需要一个含有三级菜单的结构模板，用于业务快速开发。

解决：

sidebar.vue

<template>
  <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" 
    active-text-color="#ffd04b">
    <template v-for="menu in menus">
      <el-submenu :index="menu.index" v-if="menu.children && menu.children.length > 0">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{ menu.name }}</span>
        </template>
        <template v-for="child in menu.children">
          <el-submenu :index="child.index" v-if="child.children && child.children.length > 0">
            <template slot="title">{{ child.name }}</template>
            <el-menu-item v-for="subChild in child.children" :index="subChild.index" :key="subChild.index">{{
    subChild.name
  }}</el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="child.index">{{ child.name }}</el-menu-item>
        </template>
      </el-submenu>
      <el-menu-item v-else :index="menu.index">{{ menu.name }}</el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      defaultActive: '1',
      menus: [
        {
          index: '1',
          name: '一级菜单1',
          children: [
            {
              index: '1-1',
              name: '二级菜单1-1',
              children: [
                { index: '1-1-1', name: '三级菜单1-1-1' },
                { index: '1-1-2', name: '三级菜单1-1-2' }
              ]
            },
            {
              index: '1-2',
              name: '二级菜单1-2',
              children: [
                { index: '1-2-1', name: '三级菜单1-2-1' },
                { index: '1-2-2', name: '三级菜单1-2-2' }
              ]
            }
          ]
        },
        {
          index: '2',
          name: '一级菜单2',
          children: [
            {
              index: '2-1',
              name: '二级菜单2-1',
              children: [
                { index: '2-1-1', name: '三级菜单2-1-1' },
                { index: '2-1-2', name: '三级菜单2-1-2' }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.el-menu {
  width: 287px;

  .el-menu-item {
    font-size: 16px;
    padding-left: 49px;

    &.is-active {
      //color: #fff;
      //background-color: #6c7c97;
      background-color: #fafafa;
      color: #409eff;
    }
  }
}

.el-submenu /deep/ .el-submenu__title {
  font-size: 16px;
}

.cuscRouter {
  // background-color: #fafafa;
  color: #409eff !important;
}
</style>