涉及到路由，权限等等相关内容的部分，跟本文主旨关系不大，所以我将会在另外一篇文章中详述，混在一起的话内容太多了
基于element-ui的左侧可伸缩的菜单
通过vuejs来开发支持展开收缩的菜单是非常简单的，只需要v-if v-else即可简单实现，下面我分步骤详细讲解过程，并在后续的系列文章中详细讲解权限菜单、路由过滤等等一些实用的技巧。当然还包括完整实现后台管理页面所要重点关注的细节。如何把权限菜单展示出来呢？
首先，这是一个动态菜单，该显示什么样的菜单需要从后端获取，规则方面如下：[ { 'label': '这个菜单', 'id': 001， 'parntid': 0 }, { 'label': '那个菜单', 'id': 002, 'parntid': 0 }, { 'label': '二个菜单', 'id': 003, 'parntid': 001 }, { 'label': '三个菜单', 'id': 003, 'parntid': 001 }, { 'label': '四个菜单', 'id': 003, 'parntid': 002 }, { 'label': '吴个菜单', 'id': 003, 'parntid': 002 }] 注意：我这里是用的两级菜单，同样的原理可以很简单的生成多级的。json中通过id来实现父子关联，也可以改成多级的json，用child来表示子级，子级的子级。这样也可以很容易的生成多级的多级菜单。不过通常也就两级或者三级。原理相同很容易扩展，如果不知道怎么扩展欢迎加入qq群：478694438来探讨。
下面看一下菜单的展示，需要aside标签，aside标签是html5的标签，没见过aside ？不要紧换成div也行。先看效果，再看代码（代码看上去有点长，别被吓着，我后面详细讲解）：这是收缩的状态：
这是展开的状态：
来分析一下这些乱糟糟的代码（这是我从源码中截出来的所以看起来有点乱）：
<el-menu>、<ul>、changeState这三个都是aside标签下的同级的标签，分别对应：展开状态下的菜单、收缩状态下的菜单、切换状态的箭头。先看el-menu：{ {item.permissionName}} { {child.permissionName}}
collapsed这个值即为判断显示展开还是收缩状态的开关。对照ul下的v-else看。通过一个v-for 循环除所有的父级菜单，再次循环寻找子级菜单中parentId==id的子菜单，作为该父级菜单下的子菜单。这样就实现了展开状态下的菜单。
注意：图标的问题，图标可以选择从后端返回class，这样做起来起来更简单，我这里是通过预设一个getIcon（）函数在本地设置显示，由于图标和路由面临的是相同的实现，所以我会在路由跳转相关的地方详细解释一下，应该在何种场景下选择何种方式。再看ul：
这根element-ui就没有关系了，简单的ul li 实现。（路由相关的可以展示忽略，我会在下一篇文章中详细描述）
最后看：
通过collapsed 在v-if v-else中绑定视图简单实现了，开关功能。
写在最后
这个功能看似简单却包含了vuejs的十几个知识点。难倒了很多人，我之所有写这篇文章，也是因为很多朋友，在此之前不断的询问我如何才能优雅的实现这个功能。当然了这只一个完整的后台管理的开始，我将会在后面的文章中继续讲解关于大家最关心的要不要使用addRoutes，如何使用addRoutes，不使用addRoutes的情况下如何使用路由拦截来有没的实现路由与权限的匹配，包括系统内部不同权限展示不同的操作界面的问题，当然了这是后话。如果有时间的话，我会把这个系列写完，知道朋友们能独立开发一个完整的vuejs的单页面后台管理程序。另
文中设计的代码我将会上传到讨论群中（478694438），不足之处优化共同探讨。