关闭

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

标签: vue.js动态菜单
2715人阅读 评论(0) 收藏 举报
<!--导航菜单-折叠功能-->
<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项目动态配导航菜单,只要路由配置好,菜单就能实现。

1
0
查看评论

Vue + ElementUI 手撸后台管理网站基本框架(三)登录及系统菜单加载

Vue + ElementUI 手撸后台管理网站基本框架(三)登录及系统菜单加载 本章主要讲解利用ElementUI创建一个导航菜单。实现导航菜单邪道router模式及点击根节点关闭所有菜单
  • harsima
  • harsima
  • 2017-09-12 20:47
  • 8253

分享一个VUE Element-UI 的多级菜单动态渲染的组件

以下是组件代码: <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'"...
  • goodsave
  • goodsave
  • 2017-12-23 14:36
  • 1413

vue+ElementUI实现订单页动态添加产品效果

使用vue2.0(ElementUI基于vue2.0)+ElementUI*(饿了么出品*)实现的在订单页面动态添加产品的效果,并自动计算总价。代码直接保存即可查看效果。
  • henu2009220176
  • henu2009220176
  • 2016-11-29 17:26
  • 15709

vue使用ElementUI时导航栏默认展开

vue使用ElementUI时导航栏默认展开 在使用elementUI的时候发现,如果正常的 http://element.eleme.io/#/zh-CN/component/menuasdfsafasdfasdfsafasdfasdfsafasdfasdfsafasdfasdfsafasdfas...
  • wild46cat
  • wild46cat
  • 2017-08-05 11:27
  • 5824

Redrain 通用菜单控件使用方法和说明(增加动态添加功能、附源码和demo)

转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/38253297    2015.1.19   Redrain
  • zhuhongshu
  • zhuhongshu
  • 2015-01-19 23:38
  • 5515

ElementUI案例演示:导航、布局、加载动画

知识点1.vue-router之嵌套路由 http://router.vuejs.org/zh-cn/essentials/nested-routes.html 2.element-ui 导航组件、布局组件、加载动画 http://element.eleme.io/#/zh-CN/compo...
  • github_26672553
  • github_26672553
  • 2016-12-08 14:02
  • 67921

vue2.0导航菜单切换

vue2.0 导航菜单切换
  • qq_35313994
  • qq_35313994
  • 2017-04-26 11:11
  • 5643

使用vue开发多级多选菜单组件

要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表 点击父标题栏的勾选图标可以全选或取消子列表 点击子列表的勾选图标达到全选时,父标题栏的勾选图标自动勾选;反之,没达到全选时,父标题栏的勾选图标自动取消勾选 当所有父标题栏的勾选图标达到全选时,最底下那个全选框自动勾选;反之...
  • qq_26598303
  • qq_26598303
  • 2016-08-25 11:03
  • 21484

vue+vue-router+vuex,利用vue-router2.2.0新增特性addRoutes实现路由动态加载,菜单动态加载,运用于后台管理系统,路由数据取自数据库

vue,vuex,vue-router新特性addRoutes,动态加载路由,服务端渲染路由
  • s8460049
  • s8460049
  • 2017-03-13 15:04
  • 22987

vue中用动态组件实现选项卡切换效果

导航按钮:<div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>...
  • luckylqh
  • luckylqh
  • 2016-11-04 18:15
  • 20536
    个人资料
    • 访问:5150次
    • 积分:158
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条