vue.js+element-ui动态配置菜单的实例


Posted in Javascript onSeptember 07, 2018

如下所示:

<!--导航菜单-折叠功能-->
<aside :class="collapsed?‘menu-collapsed‘:‘menu-expanded‘">
<!--单个激活 并以 index 作为 path 进行路由跳转-->
<el-menu unique-opened router v-show="!collapsed">
<!--动态路由到子组件 将不可见的路径隐藏-->
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+‘‘" v-if="!item.leaf">
<!--用el ui 的title进行solt分发菜单-->
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<!--item.name和item.children.name来配置菜单栏和子菜单栏的名称-->
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>

以上这篇vue.js+element-ui动态配置菜单的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 #Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 #Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 #Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 #Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 #Javascript
cnpm加速Angular项目创建的方法
Sep 07 #Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 #Javascript
You might like
分享一个超好用的php header下载函数
2014/01/31 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
用jquery来定位
2007/02/20 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
小学家长评语大全
2014/04/16 职场文书
党务公开方案
2014/05/06 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
2014年物流工作总结
2014/11/25 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
员工给公司的建议书
2019/06/24 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python