一、目的
接之前的一篇博客文章,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>
整个后台管理系统模板的顶部一级菜单栏,左侧多级菜单栏的实现过程大致是这样的,有什么建议也欢迎评论留言,转载请注明出处哈,感谢支持!