详解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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
JS简单随机数生成方法
Sep 05 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
HTML+JS实现在线朗读器
Feb 15 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 文件上传类代码
2011/08/06 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python数据类型之List列表实例详解
2019/05/08 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python实现日志按天分割
2019/07/22 Python
python绘制随机网络图形示例
2019/11/21 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
Python 列表的清空方式
2020/01/13 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
药店采购员岗位职责
2014/09/30 职场文书
教师师德表现自我评价
2015/03/05 职场文书
2015大学迎新标语
2015/07/16 职场文书
调研报告的主要写法
2019/04/18 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis