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

以下是组件代码:

<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>

最后看下效果:

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

{
  "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多级菜单动态渲染的组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • vue动态路由实现多级嵌套面包屑的思路与方法

    前言 最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a:/b/03:/bdetail/0

  • Vuex,iView UI面包屑导航使用扩展详解

    本案例是基于Vuex的公共数据库,你在了解本案例之前要了解Vuex的使用方法. https://www.iviewui.com/components/breadcrumb 打开网址我们可以知道这个组件的面包屑导航是基于路由跳转的.但是我们项目中常常用到单页面查询面包屑导航.小生开始为这个纠结好久.然后和小伙伴一起研究出来一套单页面不用路由跳转的使用方法. 先看看效果图 1,首次进来 2,查询结果 3,再次点击面包屑导航 4,查询结果 基本的效果是这样的 下面看代码 <template> <

  • vue+element-ui动态生成多级表头的方法

    vue+element html配置: <div id="table">{{tableData}} <el-table :data="tabledata01" :span-method="tableSpanMethod" max-height="420"> <el-table-column v-for='item in tableConfig' :label="item.label&qu

  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "

  • vue+elementUI动态生成面包屑导航教程

    效果如下所示: 项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示 <el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect"> <div class="user-menu-box" v-for="menu in menus" :key="menu.

  • VUE+elementui面包屑实现动态路由详解

    我的路由: const routerMap = [ { path: '/', redirect: 'dashboard', component: Layout, name:'Dashboard', children: [ { path: 'dashboard', component: () => import('@/view/dashboard'), name: 'Dashboard', meta: { title: 'dashboard', icon: 'dashboard', noCache

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

    以下是组件代码: <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.

  • 详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法  1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicVa

  • 详解vue element plus多语言切换

    目录 前言 如何实现多语言切换 ? 1.安装包vue-i18n 2.在src目录下新建如图: 3. 在main.js中 4.在vue文件中使用 如何动态切换语言并更改elementUI语言 ? 1.利用vuex,在mutations中写一个方法更改element语言 2.使用 更改完elementUI组件视图不更新? 1. 在router-view上控制视图显示/隐藏 2. 在切换语言时调用reload 3.需在main.js中调用一下commit,不然第一次进入elementUI 不会更改语言

  • vue element 中的table动态渲染实现(动态表头)

    通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头.通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据. 子组件table中template模板 <el-table :data="this.tableData" height="400px" max-height="400px" size="small" row-class-name="row" cell

  • 详解Vue.js基于$.ajax获取数据并与组件的data绑定

    Vue.js与jQuery不冲突??? 在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等. 然而,Vue.js和jQuery冲突吗??? 答案显然是不冲突!!! 接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中. 创建Vue.js单文件组件 <

  • 详解vue项目优化之按需加载组件-使用webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js  路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm

  • Vue + Element UI图片上传控件使用详解

    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

  • Vue+Element ui 根据后台返回数据设置动态表头操作

    由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="

  • Vue+Element UI实现下拉菜单的封装

    本文实例为大家分享了Vue+Element UI实现下拉菜单封装的具体代码,供大家参考,具体内容如下 1.效果图 先贴个效果图,菜单项没有做样式美化,图中显示的边框也是没有的(边框是外部容器的边框),其它的根据需要自己修改一下样式即可. 2.组件封装 组件的封装用到了CSS动画.定位.,以及Element UI提供的下拉菜单组件el-dropdown.代码如下, <template> <div class="all" @click="clickFire&qu

  • Vue + Element UI 实现权限管理系统之菜单功能实现代码

    目录 菜单功能实现 菜单接口封装 菜单管理界面 测试效果 源码下载 菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m

随机推荐