Element NavMenu动态生成导航菜单
为了演示方便,不从数据库获取了


{
"data":[
{
"id":125,
"authName":"用户管理",
"path":"users",
"children":[
{
"id":110,
"authName":"用户列表",
"path":"users",
"children":[ ],
"order":null
}
],
"order":1
},
{
"id":103,
"authName":"权限管理",
"path":"rights",
"children":[
{
"id":111,
"authName":"角色列表",
"path":"roles",
"children":[ ],
"order":null
},
{
"id":112,
"authName":"权限列表",
"path":"rights",
"children":[ ],
"order":null
}
],
"order":2
},
{
"id":101,
"authName":"商品管理",
"path":"goods",
"children":[
{
"id":104,
"authName":"商品列表",
"path":"goods",
"children":[ ],
"order":1
},
{
"id":115,
"authName":"分类参数",
"path":"params",
"children":[ ],
"order":2
},
{
"id":121,
"authName":"商品分类",
"path":"categories",
"children":[ ],
"order":3
}
],
"order":3
},
{
"id":102,
"authName":"订单管理",
"path":"orders",
"children":[
{
"id":107,
"authName":"订单列表",
"path":"orders",
"children":[ ],
"order":null
}
],
"order":4
},
{
"id":145,
"authName":"数据统计",
"path":"reports",
"children":[
{
"id":146,
"authName":"数据报表",
"path":"reports",
"children":[ ],
"order":null
}
],
"order":5
}
],
"meta":{
"msg":"获取菜单列表成功",
"status":200
}
}
导航原始Json
组件文档地址:https://element.eleme.cn/#/zh-CN/component/menu
全局导入及设置
import element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
Vue.use(element, axios)
Vue.prototype.$http = axios
NavMenu结构 (default-active当前激活菜单ID,index菜单唯一标志),目录结构清楚了,v-for循环即可,子菜单循环父菜单的children
<el-menu default-active="11">
<el-submenu index="1">
<!-- 一级导航 -->
<template slot="title">
<span>导航一</span>
</template>
<!-- 子导航 -->
<el-menu-item index="11">
<span slot="title">子导航一</span>
</el-menu-item>
<el-menu-item index="12">
<span slot="title">子导航二</span>
</el-menu-item>
<el-menu-item index="13">
<span slot="title">子导航三</span>
</el-menu-item>
</el-submenu>
</el-menu>
json返回格式
Vue页面全部代码
<template>
<el-row>
<el-col :span="24">
<el-menu default-active="0">
<el-submenu
:index="item.id + ''"
v-for="item in menuList"
:key="item.id"
>
<template slot="title">
<span>{{ item.authName }}</span>
</template>
<el-menu-item
:index="subItem.id + ''"
v-for="subItem in item.children"
:key="subItem.id"
>
<span slot="title">{{ subItem.authName }}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</template> <script>
export default {
name: "about",
data() {
return {
menuList: [],
};
},
created() {
this.getMenuList();
},
methods: {
getMenuList() {
this.$http.get("menus").then((res) => {
console.log(res);
if (res.data.meta.status !== 200) {
this.$message({
message: res.data.meta.msg,
type: "error",
});
}
this.menuList = res.data.data;
});
},
},
};
</script>
<style scoped>
.el-row {
width: 200px;
}
</style>
菜单展示
菜单设置好需要链接到相关页面,Menu属性中增加router即可(是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转),但需要更改上述菜单的ID为path


<template>
<el-row>
<el-col :span="24">
<el-menu default-active="0" unique-opened router>
<el-menu-item index="0">
<template slot="title">
<i class="el-icon-s-home"></i>
<router-link to="/home">首页</router-link>
</template>
</el-menu-item>
<el-submenu
:index="'/' + item.path"
v-for="item in menuList"
:key="item.id"
>
<template slot="title">
<i class="el-icon-s-promotion"></i>
<span>{{ item.authName }}</span>
</template>
<el-menu-item
:index="'/' + subItem.path"
v-for="subItem in item.children"
:key="subItem.id"
>
<i class="el-icon-menu"></i>
<span slot="title">{{ subItem.authName }}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</template>
更改后菜单代码
注: unique-opened 是否只保持一个子菜单的展开
Element NavMenu动态生成导航菜单的更多相关文章
- JQuery实现动态生成树形菜单
jQuery实现动态生成树形菜单 有一个需求:菜单导航条需要依据不同的权限动态提取出来.计划是将功能模块与用户权限之间的关系保持到一个配置表中.所以功能菜单的话就需要动态提取出来再显示.借助jquer ...
- jquery 根据后台传递过来的三维数组动态生成三级菜单
根据后台传递过来的三维数组动态生成三级菜单 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- jQuery ui背景色动态渐变导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 应用rbac组件 动态生成一级菜单
动态生成一级菜单 改表结构 需要知道是否是菜单\icon\名称权限表 +字段: is_menu = models.BooleanField(max_length=32,verbose_name='是否 ...
- 用C#从数据库动态生成AdminLTE菜单的一种方法
当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template). 此核心文件开源在Github:https://g ...
- MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...
- ASP.NET MVC动态生成网站菜单及子菜单
在开发ASP.NET MVC网站时,Insus.NET想实现动态产生网站的主菜单及子菜单. 你需要在网站管理后台管理此2张表(Menu,SubMenu)的信息,添加,删除,编辑,更新等. Sequen ...
- 用jq动态给导航菜单添加active
点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...
- django中动态生成二级菜单
一.动态显示二级菜单 1.修改权限表结构 (1)分析需求,要求左侧菜单如下显示: 客户管理: 客户列表 账单管理: 账单列表 (2)修改rbac下的models.py,修改后代码如下: from dj ...
随机推荐
- csredis-in-asp.net core理论实战-哨兵模式-使用示例
csredis 开源地址 https://github.com/2881099/csredis 续上篇 csredis-in-asp.net core理论实战-主从配置.哨兵模式 示例源码 https ...
- 🏆【Java技术专区】「编译器专题」重塑认识Java编译器的执行过程(消除数组边界检查+公共子表达式)!
前提概要 Java的class字节码并不是机器语言,要想让机器能够执行,还需要把字节码翻译成机器指令.这个过程是Java虚拟机做的,这个过程也叫编译.是更深层次的编译. 在编译原理中,把源代码翻译成机 ...
- 寄生线虫免疫学研究新路径!华中农业大学胡敏团队报道寄生线虫N-糖基化修饰图谱
N-糖基化修饰是真核生物中一种重要的蛋白质翻译后修饰,在许多生物学过程中起着关键作用,包括蛋白质折叠.受体-配体相互作用.免疫应答和疾病发病机制等.近年来,高精度质谱技术的出现促进了糖组和糖蛋白质组的 ...
- C++ //拷贝构造函数调用时机//1.使用一个已经创建完毕的对象来初始化一个新对象 //2.值传递的方式给函数参数传值 //3.值方式返回局部对象
1 //拷贝构造函数调用时机 2 3 4 #include <iostream> 5 using namespace std; 6 7 //1.使用一个已经创建完毕的对象来初始化一个新对象 ...
- 大学同学做Java开发比我多5K,八年老Android只会crud该转Java吗?
最近在网上看到这样一个帖子: 做了八年Android开发,感觉这块做着也挺没意思,日常工作就是做一些架构优化,质量数据监控,改一改构建脚本,最主要的是业务负责人没有一个是做客户端的,都是后端的人. 最 ...
- Java线程基础及多线程的实现
一.进程和线程 1.进程:正在运行的程序 是系统进行资源分配和调用的独立单位 每一个进程都有它自己的内存空间和系统资源 2.线程是进程中的单个顺序控制流,是一条执行路径 ...
- shell趣味实验——图形
目录 一.直线 二.矩形 2.1.镂空矩形 三.直角三角形 3.1.倒直角三角形 3.2.反直角三角形 3.3.等腰三角形 3.4.倒等腰三角形 3.5.菱形 四.平行四边形 五.梯形 5.1.等腰梯 ...
- Python语言系列-10-数据库
MySQL 基础环境准备 readme.txt 作者:Alnk(李成果) 版本:v1.0 安装mysql数据库 略 创建student库 # mysql> create database stu ...
- sqli-labs 16-20
less 16: 和less 15基本一致,只是对参数进行了 ") 的包裹,注意闭合语句使用延时注入即可. 下面给一个payload示例: uname=admin")and if( ...
- 尝试通过 JDBC 将 UTF-8 插入 MySQL 时出现“乱码”
这是我的连接设置方式: Connection conn = DriverManager.getConnection(url + dbName + "?useUnicode=true& ...