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使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
js实现购物车商品数量加减
Sep 21 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 Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python动态文本进度条的实例代码
2020/01/22 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
工作态度检讨书
2014/02/11 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
2014年环保工作总结
2014/11/26 职场文书
2014年财政局工作总结
2014/12/09 职场文书
中班下学期个人总结
2015/02/12 职场文书
筑梦中国心得体会
2016/01/18 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python