左边菜单动态的展示

首先后端的接口要返回菜单的list集合，是json格式，我使用的是python接口

def getmaenu(request):if request.method == 'GET':data = {"code": 200,"msg": '登录成功',"data":[{"id":101,"authNmae":"用户管理","path":"shopmanager","children":[{"id":104,"authNmae": "用户列表","path": "users","children":[]
,                    }]},{"id": 102,"authNmae": "手机管理","path": "phonemanager","children": [{"id": 105,"authNmae": "手机列表","path": "phonelist","children": [], }]},{"id": 103,"authNmae": "小吃管理","path": "xaiochimanager","children": [{"id": 106,"authNmae": "小吃列表","path": "xaiochilist","children": [], }]},],"meta":{"msg":"获取列表成功","status":200}}resp = JsonResponse(data)return respelse:return HttpResponse(json.dumps("登录失败", ensure_ascii=False), content_type='application/json')

前端调用这个接口的方法是：

前端打印的是

将后端返回的东西放到list集合变量里面，也就是放到

既然list集合变量里面有数据了，我们遍历就可以了

左边菜单的模型是从官网拿过来的

我拿过来的代码是

红框里面的东西都是关于菜单的，里面的代码是

  <!-- 左边菜单 --><el-aside :width="sfzk?'64px':'200px'">
<!-- 收起左边菜单 --><div style="color:#fff;background: rgb(74, 80, 100);cursor: pointer;" @click="sfzk=!sfzk">|||</div><!--  这个里面写这个菜单栏的各种各样的属性background-color  这个属性是设置左边菜单的背景色text-color    一级菜单的字的颜色default-active  菜单的属性有个index属性，这个值就是那个前面有冒号   是动态绑定router  是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转--><el-menu  :default-active= "activePath"class="el-menu-vertical-demo"background-color="rgb(51, 55, 68)"text-color="white"active-text-color="#409EFF":unique-opened= "true":router= "true":collapse= "sfzk":collapse-transition= "false"><!-- 一级导航   先遍历第一层数据--><el-submenu :index= "item.id+''"  v-for="item in menuList" :key="item.id" ><template slot="title"><i :class="objIcon[item.id]"></i><span>{{item.authNmae}}</span></template><!-- 二级导航  将第一层数据里面的子级拿出来之后，进行遍历属性前面加冒号是动态绑定动态绑定值和等号之间要空一格，这样颜色就会变为黄色--><el-menu-item :index= "item2.path"  v-for="item2 in item.children" :key="item2.id" @click="changeActive('/'+item2.path)"><i class="el-icon-menu"></i><span slot="title">{{item2.authNmae}}</span></el-menu-item></el-submenu></el-menu></el-aside>

左边菜单的属性介绍

都是在这个里面写关于菜单的属性，具体的看官网

遍历菜单

  <!-- 一级导航   先遍历第一层数据--><el-submenu :index= "item.id+''"  v-for="item in menuList" :key="item.id" ><template slot="title"><i :class="objIcon[item.id]"></i><span>{{item.authNmae}}</span></template><!-- 二级导航  将第一层数据里面的子级拿出来之后，进行遍历属性前面加冒号是动态绑定动态绑定值和等号之间要空一格，这样颜色就会变为黄色--><el-menu-item :index= "item2.path"  v-for="item2 in item.children" :key="item2.id" @click="changeActive('/'+item2.path)"><i class="el-icon-menu"></i><span slot="title">{{item2.authNmae}}</span></el-menu-item></el-submenu>

以上代码解释：

将list集合的变量拿过来进行遍历，将名字取出来放到对应的位置，但是对于子级，也就是遍历第一级里面的子级item.children。也就是要便利这个item.children。

这样左边菜单就出来了

左边菜单折叠效果

如何实现以上的效果。

首先做一个点击的那个区域

在菜单的上面加一个div就可以了

  <div style="color:#fff;background: rgb(74, 80, 100);cursor: pointer;" @click="sfzk=!sfzk">|||</div>

color是字体颜色，background是背景颜色，cursor是设置鼠标放上去有小手。
菜单区域进行折叠的原因是菜单有一个属性

这个属性变为true ，那个这个菜单就可以折叠

所以设置属性，，前面加冒号是动态改变这个属性的值，

默认为false，那么什么时候变为true呢？点击上面的区域的时候，可以折叠，那么就需要在上面区域的div上面做一个事件，也就是一个方法。点击的时候变为true

点击让这个属性转换一下就可以了。

这样就可以折叠了，但是动作比较的慢，所以关闭动画，这个菜单有个属性

折叠多么大区域，展开多么大区域？我们可以自己设置
对左边菜单的宽度进行动态的展示

不同的菜单右面展示不同的页面

有个属性

只要设置了，那么就开启了，只是跳转的路径是以每一个菜单的index属性的值作为跳转到地方。

所以我们可以设置每一个菜单的index的值为当前的值

后端传回来的每一个菜单都有路径，我们只需要遍历出来放到对应菜单的index属性里面就可以了。

因为是同一个页面，只是右边的展示的不一样的页面，所以我们需要将不同的页面放到右边，所以我们可以将不同页面的路径设置为当前菜单所在页面的路径的子路径，也就是只要设置

之后在右边写一个占位符

以上就实现了点击不同的菜单，右边展示不同的页面

VUE项目后台管理系统（四）左边菜单动态展示，不仅可以折叠，而且点击不同的菜单，右边展示不同的页面相关推荐

结合服务器+后端+前端，完成 vue项目后台管理系统
目录以上是项目的服务器php.后端.前端.已经可以正常运行一登录: 登录页进度条:戳这里Vue项目电商后台管理系统 nprogress--进度条_活在风浪里的博客-CSDN博客二侧导航三 ...
vue项目-后台管理系统
前言: 一个传唱度极高的前端项目,及其适合像博主这样的小白练手.特以此文章记录下项目基本的创作思路,并且文末附赠项目源码,思维导图及一些后台文件,有兴趣可自取.希望对朋友们有用. 结构: 一,登录页 ...
SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
Vue + ElementUI 后台管理系统实现主题风格切换
一.目的此次写作内容是在我之前发布一篇文章的基础上进行新增的. 上一篇文章:Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客这次要实 ...
VUE项目学习（四）：编写个人页面和配置路由
VUE项目学习(四):编写个人页面和配置路由 1.准备工作,下载vue项目先配置好node.js开发环境,并使用VUE-Cli下载好VUE项目,具体流程可以参考博客https://blog.csdn ...
教育平台项目后台管理系统：视频讲解
文件说明 Maven 测试代码:``edu_work/hello_maven` 数据库脚本文件:lagou_edu.sql 测试开发接口所用的 SQL 语句:测试语句.sql 后台管理系统项目代码:e ...

VUE项目后台管理系统（四）左边菜单动态展示，不仅可以折叠，而且点击不同的菜单，右边展示不同的页面

目录