详解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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
分页栏的web标准实现
Nov 01 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
node.js实现爬虫教程
Aug 25 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php微信开发之图片回复功能
2018/06/14 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
python绘制玫瑰的实现代码
2020/03/02 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
十八届三中全会报告学习材料
2014/02/17 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
推普周活动总结
2014/08/28 职场文书
城南旧事电影观后感
2015/06/16 职场文书
党纪处分决定书
2015/06/24 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
公司转让协议书
2016/03/19 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis