一、目的

接之前的一篇博客文章，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-menu
            class="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>

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