一、目的

接之前的一篇博客文章，https://blog.csdn.net/weixin_41856395/article/details/110441057

Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏，收到小伙伴们评论留言说：如何实现左侧三级菜单栏或者更多级菜单栏？

所以这篇博客文章来实现这样的需求，在此也感谢小伙伴们对本人博客的支持 ~ 

二、效果图

该实现效果是在之前博客文章的基础上新增的，所以可以在原有的代码基础上修改和完善。

后台管理系统模板的源码地址：https://github.com/hxhpg/vue-secondMenu-test

三、具体操作实现

1、修改需要产生左侧多级菜单栏的 index.vue 文件，这里假设我要修改一级菜单3下的左侧菜单，如图：

这里的 test3-2 文件夹先不管，往下会解释到，这里要得益于 JavaScript 数据结构的灵活性（对象里放数组，数组里再放对象），修改部分的代码如下：

data() {return {items: [{index: 'test3-1',title: '二级菜单3-1'},{index: 'test3-2',title: '二级菜单3-2',nextItems: [{index: 'test3-2-1',title: '三级菜单3-2-1'},{index: 'test3-2-2',title: '三级菜单3-2-2'},{index: 'test3-2-3',title: '三级菜单3-2-3'}]}]}},

2、接下来要修改左侧菜单的写法，二级菜单不变，通过 v-if 来判断 item.nextItems 是否存在，存在就生成三级菜单，否则不生成。

然后三级菜单通过 v-for="itemsTwo in item.nextItems" 来循环生成。

SideMenu.vue 文件修改部分的代码如下：

<template><div class="sidebar"><!-- 左侧二级菜单栏的组件封装 --><el-menuclass="sidebar-el-menu":default-active="toIndex()"background-color="white"text-color="#7a8297"active-text-color="#2d8cf0"router><div v-for="item in items" :key="item"><!-- 二级菜单 --><el-menu-item :index="item.index" :key="item.index" v-if="item.nextItems == undefined"><span slot="title">{{ item.title }}</span></el-menu-item><!-- 三级菜单 --><el-submenu :index="item.index" v-else><span slot="title">{{item.title}}</span><el-menu-item-group><el-menu-item v-for="itemsTwo in item.nextItems" :index="itemsTwo.index" :key="itemsTwo.index">{{itemsTwo.title}}</el-menu-item></el-menu-item-group></el-submenu></div></el-menu></div></template>

这里主要是要对 Element 组件有所了解，然后去通过判断和循环的代码思路来实现，小伙伴们有兴趣的话可以再往下编写更多级的左侧菜单栏。

3、到这里页面的效果已经可以出来了，接下来就是实现对应页面跳转。

编写路由 router 文件夹下的 index.js 文件。同样，这里假设我要修改一级菜单3下的左侧菜单，修改部分的代码如下：

{path: '/test3',component: () => import('../page/test3/index.vue'),meta: {title: '一级菜单3'},redirect:'/test3/test3-1',children:[{path: 'test3-1',component: () => import('../page/test3/test3-1.vue'),meta: {title: '二级菜单3-1'}},{path: 'test3-2-1',component: () => import('../page/test3/test3-2/test3-2-1.vue'),meta: {title: '三级菜单3-2-1'}},{path: 'test3-2-2',component: () => import('../page/test3/test3-2/test3-2-2.vue'),meta: {title: '三级菜单3-2-2'} }, {path: 'test3-2-3',component: () => import('../page/test3/test3-2/test3-2-3.vue'),meta: {title: '三级菜单3-2-3'} } ]},

由于从新增的路由可以看到，没有对应的文件，所以我们新建相对应的 vue 文件，如图：

4、接下来就可以去开发具体的主体内容区域的页面了。例如 test3-2-2.vue 的代码如下：

<template><div class="content-box"><div class="container"><p>主题页面 3 - 2 - 2</p><div class="test3-2-2 test-div"><el-progress :percentage="100"></el-progress><el-progress :percentage="100" status="success"></el-progress><el-progress :percentage="100" status="warning"></el-progress><el-progress :percentage="50" status="exception"></el-progress></div></div></div></template><script>export default {}</script><style>.test3-2-2{width: 30%;}</style>

整个后台管理系统模板的顶部一级菜单栏，左侧多级菜单栏的实现过程大致是这样的，有什么建议也欢迎评论留言，转载请注明出处哈，感谢支持！