饿了么组件库，element-ui开发精美的后台管理系统系列之（一）开发伸缩菜单

whlong 发布于2019-08-21 16:23 / 3423人阅读

摘要：先看这个值即为判断显示展开还是收缩状态的开关。这样就实现了展开状态下的菜单。如果有时间的话，我会把这个系列写完，知道朋友们能独立开发一个完整的的单页面后台管理程序。

涉及到路由，权限等等相关内容的部分，跟本文主旨关系不大，所以我将会在另外一篇文章中详述，混在一起的话内容太多了

基于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也行。先看效果，再看代码（代码看上去有点长，别被吓着，我后面详细讲解）：
这是收缩的状态：

这是展开的状态：

来分析一下这些乱糟糟的代码（这是我从源码中截出来的所以看起来有点乱）：
、

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），不足之处优化共同探讨。

GPU云服务器云服务器饿了么在大数据上的成功饿了么饿了么 js 饿了么配送调度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88484.html

【收藏】2019年最新Vue相关精品开源项目库汇总

摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

williamwen1986 2019-08-23 14:50 评论0 收藏0
Vue 2.x 实战之后台管理系统开发（一）

摘要：导语下文实战之后台管理系统开发二该文章将从头到尾梳理我是如何使用开发一个后台管理项目的，我会将自己遇到的问题贴出，希望可以帮助到其他人。构建项目框架准备对于大陆用户，建议将的注册表源设置为国内的镜像，如淘宝镜像，可以大幅提升安装速度。 1. 导语下文：Vue 2.x 实战之后台管理系统开发（二）该文章将从头到尾梳理我是如何使用 Vue 2 开发一个后台管理项目的，我会将自己遇到的问...

darkbaby123 2019-08-20 16:49 评论0 收藏0
饿了么组件库element-ui正则表达式验证表单，后端验证表单。

摘要：要显示的错误提示则可以即可。写在最后的以上三点已经完全覆盖了所有表单验证的情况，可以实现非常复杂的验证。正式基于这些原因，我坚信是正确的选择。前言老是遇到一些朋友问一些element-ui组件使用相关的基础问题，因为官方文档上并没有提供所有琐碎的功能代码demo。从这里开始我会根据我实际遇到的问题记录一些常见的官方文档没有详述的功能代码，供给大家拓展思路。 1. 以中国大陆手机号验...

0x584a 2019-08-21 16:22 评论0 收藏0