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>