为了演示方便,不从数据库获取了

{
    "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动态生成导航菜单的更多相关文章

  1. JQuery实现动态生成树形菜单

    jQuery实现动态生成树形菜单 有一个需求:菜单导航条需要依据不同的权限动态提取出来.计划是将功能模块与用户权限之间的关系保持到一个配置表中.所以功能菜单的话就需要动态提取出来再显示.借助jquer ...

  2. jquery 根据后台传递过来的三维数组动态生成三级菜单

    根据后台传递过来的三维数组动态生成三级菜单 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 应用rbac组件 动态生成一级菜单

    动态生成一级菜单 改表结构 需要知道是否是菜单\icon\名称权限表 +字段: is_menu = models.BooleanField(max_length=32,verbose_name='是否 ...

  5. 用C#从数据库动态生成AdminLTE菜单的一种方法

    当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template). 此核心文件开源在Github:https://g ...

  6. MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

    稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

  7. ASP.NET MVC动态生成网站菜单及子菜单

    在开发ASP.NET MVC网站时,Insus.NET想实现动态产生网站的主菜单及子菜单. 你需要在网站管理后台管理此2张表(Menu,SubMenu)的信息,添加,删除,编辑,更新等. Sequen ...

  8. 用jq动态给导航菜单添加active

    点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...

  9. django中动态生成二级菜单

    一.动态显示二级菜单 1.修改权限表结构 (1)分析需求,要求左侧菜单如下显示: 客户管理: 客户列表 账单管理: 账单列表 (2)修改rbac下的models.py,修改后代码如下: from dj ...

随机推荐

  1. csredis-in-asp.net core理论实战-哨兵模式-使用示例

    csredis 开源地址 https://github.com/2881099/csredis 续上篇 csredis-in-asp.net core理论实战-主从配置.哨兵模式 示例源码 https ...

  2. 🏆【Java技术专区】「编译器专题」重塑认识Java编译器的执行过程(消除数组边界检查+公共子表达式)!

    前提概要 Java的class字节码并不是机器语言,要想让机器能够执行,还需要把字节码翻译成机器指令.这个过程是Java虚拟机做的,这个过程也叫编译.是更深层次的编译. 在编译原理中,把源代码翻译成机 ...

  3. 寄生线虫免疫学研究新路径!华中农业大学胡敏团队报道寄生线虫N-糖基化修饰图谱

    N-糖基化修饰是真核生物中一种重要的蛋白质翻译后修饰,在许多生物学过程中起着关键作用,包括蛋白质折叠.受体-配体相互作用.免疫应答和疾病发病机制等.近年来,高精度质谱技术的出现促进了糖组和糖蛋白质组的 ...

  4. C++ //拷贝构造函数调用时机//1.使用一个已经创建完毕的对象来初始化一个新对象 //2.值传递的方式给函数参数传值 //3.值方式返回局部对象

    1 //拷贝构造函数调用时机 2 3 4 #include <iostream> 5 using namespace std; 6 7 //1.使用一个已经创建完毕的对象来初始化一个新对象 ...

  5. 大学同学做Java开发比我多5K,八年老Android只会crud该转Java吗?

    最近在网上看到这样一个帖子: 做了八年Android开发,感觉这块做着也挺没意思,日常工作就是做一些架构优化,质量数据监控,改一改构建脚本,最主要的是业务负责人没有一个是做客户端的,都是后端的人. 最 ...

  6. Java线程基础及多线程的实现

    一.进程和线程 1.进程:正在运行的程序         是系统进行资源分配和调用的独立单位         每一个进程都有它自己的内存空间和系统资源 2.线程是进程中的单个顺序控制流,是一条执行路径 ...

  7. shell趣味实验——图形

    目录 一.直线 二.矩形 2.1.镂空矩形 三.直角三角形 3.1.倒直角三角形 3.2.反直角三角形 3.3.等腰三角形 3.4.倒等腰三角形 3.5.菱形 四.平行四边形 五.梯形 5.1.等腰梯 ...

  8. Python语言系列-10-数据库

    MySQL 基础环境准备 readme.txt 作者:Alnk(李成果) 版本:v1.0 安装mysql数据库 略 创建student库 # mysql> create database stu ...

  9. sqli-labs 16-20

    less 16: 和less 15基本一致,只是对参数进行了 ") 的包裹,注意闭合语句使用延时注入即可. 下面给一个payload示例: uname=admin")and if( ...

  10. 尝试通过 JDBC 将 UTF-8 插入 MySQL 时出现“乱码”

    这是我的连接设置方式: Connection conn = DriverManager.getConnection(url + dbName + "?useUnicode=true& ...