Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧多级菜单栏(二级、三级等)

一、目的

接之前的一篇博客文章,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>

 

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:创作都市 设计师:CSDN官方博客 返回首页

打赏作者

无解的菜鸟晖

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值