分享一个VUE Element-UI 的多级菜单动态渲染的组件

最新推荐文章于 2024-05-16 02:54:09 发布
最新推荐文章于 2024-05-16 02:54:09 发布
阅读量5.3w 收藏 65
点赞数 16
分类专栏： 编程 前端 文章标签： vue element-ui 动态菜单 递归组件 递归菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goodsave/article/details/78879842
版权

以下是组件代码：

<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的递归组件是个比较好的解决方案，可以较大的节约开发时间降低开发成本。

如果您有兴趣，不防加入我们的开源框架minsx：https://github.com/MinsxCloud






王世春
关注
  • 16
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 46
    评论
专栏目录
Vue 动态菜单+动态路由（基于Element UI）
fzy_1939的博客
07-27 8858
1.路由守卫判定当初次登录时，后端返回路由数据，处理完数据放进vuex存起来。2.（1）菜单组件去获取vuex的路由数据，进行处理形成自己需要的菜单数据并进行渲染。（2）标签页组件去vuex获取Tabs数据，进行渲染。(3)面包屑直接从vuex里获取数据，进行渲染。3.操作（1）当子菜单栏被点击时，在vuex(即store)里面添加Tab数据，同时标签页、面包屑实时渲染。操作（2）当标签页被删除时，在vuex里删除其数据，同时选中上一次点击的子菜单栏和标签页，面包屑也跟着变化。...
vue+elementui实现多层树形菜单
10-16
一个完整的树形菜单demo，下载即可运行，包含node_module包，使用vue+el-menu完成多层树形菜单。内含模拟数据格式。
详解VUE Element-UI多级菜单动态渲染的组件
10-17
主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue + Element UI 前端篇（十）：动态加载菜单
y19910825的博客
09-05 2678
如下图所示，我们在用户管理页面的时候，点击刷新浏览器，然后就白茫茫一片了，这是因为浏览器的刷新会导致整个vue重新加载，路由被重新初始化了，后面在Menu.bar添加的动态路由没有了，所以跳转的时候没有找到匹配路由，跳转的是一个不存在的页面，故而白茫茫一片。但不对呀，这里路由配置是写死的，导航菜单是菜单数据动态生成的，这个路由配置也应该是根据菜单数据动态添加的啊，嗯，所以接下来我们就来讨论动态路由配置的问题。因为我们这里是导出的是父模块，所以在具体接口调用的时候，也需要在原来的基础上加上模块了，像这样。
VUE element-ui 之多级下拉菜单（筛选框）_elementui 多层级下拉框
最新发布
2401_84618926的博客
05-16 813
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。/>
Vue之ElementUI之动态树+数据表格+分页（项目功能）
weixin_74352229的博客
09-26 2362
在上期的博客中我与各位老铁分享了有关首页导航栏及左侧树形菜单的基本搭建样式，今天的这期博客基于上期博客来实现左侧树形菜单与后台数据库进行动态绑定，还有实现后台数据在前台显示及实现分页功能。（老铁们仔细阅读观看）本期博客分享到此结束，今天给大家带来了动态树形菜单的功能实现和数据表格及分页效果的实现，两个功能实现了前后端结合，连接了数据库实现数据交互。其中使用到了ElementUI框架样式，大大减少了开发所需时间，提高了开发效率。后期博客中会进行功能增添完善，希望各位老铁能三连加关注支持一波。
element标签页tabs二次封装（vue动态组件）
陈新科的博客
01-03 2574
当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。当组件被激活时，会自动触发组件的 activated 生命周期函数。默认情况下，vue切换动态组件时无法保持组件的状态。include 属性用来指定：只有名称匹配的组件会被缓存。vue 提供了一个内置的组件，专门用来实现动态组件的渲染。循环遍历标签页，其中的if判断用于解决切换页面闪烁问题。这里用到vue的混入，方便多个页面直接引用相关代码。keep-alive 对应的生命周期函数。
【Vue.js】使用ElementUI搭建动态树&数据表格与分页
m0_73192864的博客
09-26 770
【Vue.js】使用ElementUI搭建动态树&数据表格与分页
基于Vue + element制作扁平化树形结构渲染表格（动态行列合并，树结构算法应用）
m0_49083276的博客
09-15 2288
1）扁平转树和树形转扁平，element-ui的表格组件从数组索引0开始渲染一直到最后，如果后端没有按照顺序传数据会导致表格错乱，所以我们需要将数据二次处理（扁平转树再转扁平），达到整理数据的效果//扁平转树if (!} else {});} else {});},//树转扁平// 将当前节点添加到结果数组中// 递归遍历子节点// 从每个根节点开始遍历},//重构数据},
vue+element-ui动态生成多级表头的方法
10-18
标题中的“vue+element-ui动态生成多级表头的方法”是指在Vue.js应用程序中使用Element-UI库来创建一个能够根据数据动态展示多级表头的表格组件。Element-UI是一个流行的前端UI框架，它提供了丰富的组件库，适用于...
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
12-09
父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件...
vue+element-ui构建动态菜单
ws346348183的博客
05-10 3263
1.构建菜单数据结构 config.js let config =[ { "createUserId":0, "parentMenuId":0, "icon":"el-icon-message", "name":"系统管理", "alias":"系统管理", "id":1, ...
vue项目实现下拉框的多选功能(附后端处理参数的方法)
风海洋的博客
04-09 1万+
本次演示共涉及多选框的展示、保存、编辑三个界面。
Vue3级联选择（Cascader）
Mr Dear的博客
03-31 5476
Vue3+TS 以 Vue3选择框（Select）为基础封装的级联选择框组件，支持清除，搜索，自定义搜索过滤函数等等
vue+element中动态组件component的使用
young63的博客
01-19 4269
动态生成表单 用法（来源于官网） <!-- 动态组件由 vm 实例的 `componentId` property 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component> prop（来源于官网） is - s.
基于vue和element-ui的表格组件，主推数据渲染，支持内容和方法灵活绑定，提供动态具名插槽自定义内容
kakashi_chen的博客
04-01 2516
基于vue和element-ui的表格组件，主推数据渲染，支持内容和方法灵活绑定，提供动态具名插槽自定义内容
Vue3+Ts+Vite项目(第九篇)——基于el-menu封装左侧菜单栏组件，element-plus el-menu二次封装
做笔记/记录遇到的前端bug
08-03 6758
Vue3+Ts+Vite项目基于el-menu封装左侧菜单栏组件，实现根据路由列表动态渲染导航菜单，递归实现多级菜单渲染
使用vue elementUI设置省市县三级联动的下拉列表框
热门推荐
Zhou_siyue的博客
04-01 2万+
在前端项目开发中，经常会遇到省市县三级联动的下拉列表框组的问题，许多小伙伴第一次遇到这种问题的时候都会感觉无从下手，今天就给大家分享以下我的实现方法，希望能给大家在这方面的问题上提供一些帮助和解决的思路，以便今后在遇到同类问题的时候可以轻松应对，以下内容为具体的实现过程： ...
Vue使用el-cascader 实现多级下拉菜单
m0_69210482的博客
08-30 950
【代码】Vue使用el-cascader 实现多级下拉菜单。
vue+element UI侧边菜单如何渲染多级菜单
06-08
要渲染多级菜单，可以使用 Element UI 的 Menu 组件和 Submenu 组件。首先，你需要定义一个菜单数据源，包含多级菜单的信息。例如： ```javascript menuData: [ { name: 'Dashboard', icon: 'el-icon-s-home', children: [ { name: 'Dashboard 1', path: '/dashboard/1' }, { name: 'Dashboard 2', path: '/dashboard/2' } ] }, { name: 'Products', icon: 'el-icon-menu', children: [ { name: 'Product 1', path: '/product/1' }, { name: 'Product 2', path: '/product/2', children: [ { name: 'Sub Product 1', path: '/product/2/sub/1' }, { name: 'Sub Product 2', path: '/product/2/sub/2' } ] } ] } ] ``` 然后，在你的侧边栏组件中，使用 Menu 和 Submenu 组件来渲染菜单： ```html <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <template v-for="item in menuData"> <el-submenu v-if="item.children" :index="item.name"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{ item.name }}</span> </template> <el-menu-item-group> <template v-for="child in item.children"> <el-menu-item :index="child.path">{{ child.name }}</el-menu-item> <el-submenu v-if="child.children" :index="child.path"> <template slot="title">{{ child.name }}</template> <el-menu-item-group> <template v-for="subChild in child.children"> <el-menu-item :index="subChild.path">{{ subChild.name }}</el-menu-item> </template> </el-menu-item-group> </el-submenu> </template> </el-menu-item-group> </el-submenu> <el-menu-item v-else :index="item.path"> <i :class="item.icon"></i> <span slot="title">{{ item.name }}</span> </el-menu-item> </template> </el-menu> ``` 这样，就可以渲染出多级菜单了。注意，在模板中使用了 v-for 来遍历菜单数据源，并使用 v-if 判断是否存在子菜单。如果存在子菜单，则使用 el-submenu 组件来渲染。如果还存在子菜单，则继续使用 el-submenu 组件递归渲染。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 46
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值