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

程序员文章站 2022-03-20 15:14:10

如下所示：

如下所示：

<!--导航菜单-折叠功能-->
<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动态配置菜单的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇： vue侧边栏动态生成下级菜单的方法

下一篇：慎用rm -rf /与 rm -rf /* 推荐使用mv代替rm

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

android中选中菜单的显示跳转和隐式跳转的实例介绍

mybatis动态插入list传入List参数的实例代码

Android编程之菜单的实现方法实例详解

jquery 动态遍历select 赋值的实例

Spring整合多数据源实现动态切换的实例讲解

C#动态执行字符串(动态创建代码)的实例代码

Python制作动态字符图的实例

快速解决vue动态绑定多个class的官方实例语法无效的问题

C#动态创建button按钮的方法实例详解

iOS中长按调出菜单组件UIMenuController的使用实例