详解VUE Element-UI多级菜单动态渲染的组件


Posted in Javascript onApril 25, 2019

以下是组件代码:

<template>
 <div class="navMenu">
 
  <label v-for="navMenu in navMenus">
   <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'"
          :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value"
          disabled="">
    <i :class="navMenu.entity.icon"></i>
    <span slot="title">{{navMenu.entity.alias}}</span>
   </el-menu-item>
 
   <el-submenu v-if="navMenu.childs&&navMenu.entity&&navMenu.entity.state==='ENABLE'"
         :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">
    <template slot="title">
     <i :class="navMenu.entity.icon"></i>
     <span> {{navMenu.entity.alias}}</span>
    </template>
    <NavMenu :navMenus="navMenu.childs"></NavMenu>
   </el-submenu>
  </label>
 
 </div>
</template>
 
<script>
 export default {
  name: 'NavMenu',
  props: ['navMenus'],
  data() {
   return {}
  },
  methods: {}
 }
</script>
 
<style scoped>
 
</style>

外部调用也比较简单

<!--左侧菜单组件-->
   <el-menu
    default-active="0"
    class="el-menu-vertical-demo"
    @select="menuSelected"
    background-color="#F0F6F6"
    text-color="#3C3F41"
    active-text-color="black">
    <NavMenu :navMenus="leftMenus"></NavMenu>
   </el-menu>

最后看下效果:

详解VUE Element-UI多级菜单动态渲染的组件

值得一提的是,完成此菜单需要后端的配合,笔者这里后端给出的数据为:

{
  "entity": null,
  "childs": [
    {
      "entity": {
        "id": 1,
        "parentMenuId": 0,
        "name": "systemManage",
        "icon": "el-icon-message\r\n",
        "alias": "系统管理",
        "state": "ENABLE",
        "sort": 0,
        "value": null,
        "type": "NONE",
        "discription": "用于系统管理的菜单",
        "createUserId": 1
      },
      "childs": [
        {
          "entity": {
            "id": 3,
            "parentMenuId": 1,
            "name": "authManage",
            "icon": "el-icon-loading",
            "alias": "权限管理",
            "state": "ENABLE",
            "sort": 0,
            "value": "/system/auth",
            "type": "LINK",
            "discription": "用于权限管理的菜单",
            "createUserId": 1
          },
          "childs": null
        },
        {
          "entity": {
            "id": 4,
            "parentMenuId": 1,
            "name": "roleManage",
            "icon": "el-icon-bell",
            "alias": "角色管理",
            "state": "ENABLE",
            "sort": 1,
            "value": "/system/role",
            "type": "LINK",
            "discription": "用于角色管理的菜单",
            "createUserId": 1
          },
          "childs": null
        },
        {
          "entity": {
            "id": 2,
            "parentMenuId": 1,
            "name": "menuManage",
            "icon": "el-icon-edit",
            "alias": "菜单管理",
            "state": "ENABLE",
            "sort": 2,
            "value": "/system/menu",
            "type": "LINK",
            "discription": "用于菜单管理的菜单",
            "createUserId": 1
          },
          "childs": null
        },
        {
          "entity": {
            "id": 5,
            "parentMenuId": 1,
            "name": "groupManage",
            "icon": "el-icon-mobile-phone\r\n",
            "alias": "分组管理",
            "state": "ENABLE",
            "sort": 3,
            "value": "/system/group",
            "type": "LINK",
            "discription": "用于分组管理的菜单",
            "createUserId": 1
          },
          "childs": null
        }
      ]
    },
    {
      "entity": {
        "id": 6,
        "parentMenuId": 0,
        "name": "userManage",
        "icon": "el-icon-news",
        "alias": "用户管理",
        "state": "ENABLE",
        "sort": 1,
        "value": null,
        "type": "NONE",
        "discription": "用于用户管理的菜单",
        "createUserId": 1
      },
      "childs": [
        {
          "entity": {
            "id": 7,
            "parentMenuId": 6,
            "name": "accountManage",
            "icon": "el-icon-phone-outline\r\n",
            "alias": "帐号管理",
            "state": "ENABLE",
            "sort": 0,
            "value": "",
            "type": "NONE",
            "discription": "用于帐号管理的菜单",
            "createUserId": 1
          },
          "childs": [
            {
              "entity": {
                "id": 14,
                "parentMenuId": 7,
                "name": "emailManage",
                "icon": "el-icon-sold-out\r\n",
                "alias": "邮箱管理",
                "state": "ENABLE",
                "sort": 0,
                "value": "/content/email",
                "type": "LINK",
                "discription": "用于邮箱管理的菜单",
                "createUserId": 1
              },
              "childs": null
            },
            {
              "entity": {
                "id": 13,
                "parentMenuId": 7,
                "name": "passManage",
                "icon": "el-icon-service\r\n",
                "alias": "密码管理",
                "state": "ENABLE",
                "sort": 1,
                "value": "/content/pass",
                "type": "LINK",
                "discription": "用于密码管理的菜单",
                "createUserId": 1
              },
              "childs": null
            }
          ]
        },
        {
          "entity": {
            "id": 8,
            "parentMenuId": 6,
            "name": "integralManage",
            "icon": "el-icon-picture",
            "alias": "积分管理",
            "state": "ENABLE",
            "sort": 1,
            "value": "/user/integral",
            "type": "LINK",
            "discription": "用于积分管理的菜单",
            "createUserId": 1
          },
          "childs": null
        }
      ]
    },
    {
      "entity": {
        "id": 9,
        "parentMenuId": 0,
        "name": "contentManage",
        "icon": "el-icon-rank",
        "alias": "内容管理",
        "state": "ENABLE",
        "sort": 2,
        "value": null,
        "type": "NONE",
        "discription": "用于内容管理的菜单",
        "createUserId": 1
      },
      "childs": [
        {
          "entity": {
            "id": 10,
            "parentMenuId": 9,
            "name": "classifyManage",
            "icon": "el-icon-printer",
            "alias": "分类管理",
            "state": "ENABLE",
            "sort": 0,
            "value": "/content/classify",
            "type": "LINK",
            "discription": "用于分类管理的菜单",
            "createUserId": 1
          },
          "childs": null
        },
        {
          "entity": {
            "id": 11,
            "parentMenuId": 9,
            "name": "articleManage",
            "icon": "el-icon-star-on",
            "alias": "文章管理",
            "state": "ENABLE",
            "sort": 1,
            "value": "/content/article",
            "type": "LINK",
            "discription": "用于文章管理的菜单",
            "createUserId": 1
          },
          "childs": null
        },
        {
          "entity": {
            "id": 12,
            "parentMenuId": 9,
            "name": "commentManage",
            "icon": "el-icon-share",
            "alias": "评论管理",
            "state": "ENABLE",
            "sort": 2,
            "value": "/content/comment",
            "type": "LINK",
            "discription": "用于评论管理的菜单",
            "createUserId": 1
          },
          "childs": null
        }
      ]
    }
  ]
}

总结:当遇到多叉树或无限层级问题时,vue的递归组件是个比较好的解决方案,可以较大的节约开发时间降低开发成本。

以上所述是小编给大家介绍的VUE Element-UI多级菜单动态渲染的组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
深入理解js中的加载事件
Feb 08 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
vue 中filter的多种用法
Apr 26 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 #Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 #Javascript
Angular封装搜索框组件操作示例
Apr 25 #Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 #Javascript
详解javascript中的Error对象
Apr 25 #Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 #Javascript
vue2.0自定义指令示例代码详解
Apr 25 #Javascript
You might like
PHP VS ASP
2006/10/09 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python实现的堆排序算法示例
2018/04/29 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
元旦晚会邀请函
2014/01/27 职场文书
庆元旦活动总结
2014/07/09 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2015年实习单位评语
2015/03/25 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
Python数组变形的几种实现方法
2022/05/30 Python