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 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
jquery实现网页定位导航
Aug 23 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
PHP 实现一种多文件上传的方法
Sep 20 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
vue各种事件监听实例(小结)
Jun 24 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中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
Python生成器(Generator)详解
2015/04/13 Python
对python字典过滤条件的实例详解
2019/01/22 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python的历史与优缺点整理
2020/05/26 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
超市总经理岗位职责
2014/02/02 职场文书
高考标语大全
2014/06/05 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
二审答辩状格式
2015/05/22 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js