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

最新推荐文章于 2023-10-09 21:29:56 发布
最新推荐文章于 2023-10-09 21:29:56 发布
阅读量286 收藏
点赞数
文章标签： ui
原文链接：http://www.cnblogs.com/xieli26/p/9930598.html
版权

1.组件代码

<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">
        <i :class="navMenu.entity.icon"></i>
        <span slot="title" class="item_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 class="item_title"> {{navMenu.entity.alias}}</span>
        </template>
        <NavMenu :navMenus="navMenu.childs"></NavMenu>
      </el-submenu>
    </label>

  </div>
</template>

<script>
  export default {
    name: 'NavMenu',
    props: ['navMenus'],
    data() {
      return {}
    },
    mounted(){
        console.log(this.navMenus)
    },
    methods: {}
  }
</script>

<style scoped>
  .navMenu{
    width: 100%;
    height: 100%;
    background: #00142a !important;

  }
 .item_title{
   color:#fff ;
   background-color: #00142a !important
 }


</style>
<style>
.el-submenu .el-submenu__title{
    background-color: #00142a !important;
    color:#eee !important;
  text-align: left !important;

  }
.el-submenu .el-menu-item{
  color:#eee !important;
  background-color: #00142a !important;
}
</style>


2.外部调用:

  <!--左侧菜单组件-->
        <el-menu
          :default-active="this.$router.path"
          class="el-menu-vertical-demo"
          @select="menuSelected"
          background-color="#F0F6F6"
          text-color="#3C3F41"
          active-text-color="black"
          :collapse="isCollapse"
          router
          @open="handleOpen"
          @close="handleClose"
        >
          <!--加上router 才能实现跳转-->
          <NavMenu :navMenus="leftMenus.childs"></NavMenu>
        </el-menu>

3.菜单数据:

leftMenus: {
                   "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": "NONE",
                             "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
                         }
                       ]
                     }
                   ]
                 }

4.效果图:

转载于:https://www.cnblogs.com/xieli26/p/9930598.html

weixin_30329623
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element ui 导航动态三级菜单
qq_28170105的博客
07-25 2375
代码】elementui导航动态三级菜单。
element ui菜单栏动态渲染
xiawenyi1234的博客
08-24 3290
直接上代码，模块清晰，自己赋值粘贴都行 <el-menu :default-active="this.$route.path" :unique-opened="true" router class="el-menu-vertical-demo" background-color="#393e46" text-color="#fff" active-text-color="#4480e9" .
vue+elementUI实现动态渲染二级导航菜单列表
super码力的博客
08-09 3510
vue结合elementUI实现后台数据动态渲染二级导航菜单列表
elementUI 多级菜单动态渲染
weixin_34252686的博客
08-28 1579
侧边栏导航菜单在平常 CMS 管理平台开发中很常见，最近在产品开发中就遇到难题： 公司采用的是 vue + element 技术栈，element 文档中 NavMenu 是写死的，而不是通过数据渲染的，菜单多、层级深的时候，就很鸡肋... 再参考 此链接 后，再结合自己需求，组装成 kgMenu 组件 kgMenu 里面封装 kgSubMenu、kgMenuGroup、kgMenuItem 三个...
ElementUI-实现二级菜单随配置文件自动渲染
qq_49172635的博客
04-09 312
二级菜单随配置文件自动渲染
Element-UI组件之 — — 下拉菜单
m0_57783938的博客
08-02 1012
:label="item.label" 下拉菜单列表中要显示的内容 :value="item.value" 选中后显示的内容 注：:value和v-model是双向绑定的 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="it...
详解VUE Element-UI多级菜单动态渲染的组件
10-17
主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+element-ui动态生成多级表头的方法
10-18
今天小编就为大家分享一篇vue+element-ui动态生成多级表头的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
12-09
父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件...
vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
是日前端
04-17 4057
早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一下心路历程 一、概念 递归：递归其实说白了，就是自己调用自己，样子就像是套娃一个套一个的，小时候玩过一个游戏汉诺塔就是利用的递归原理： 函数递归：函数利用函数名还调用自己 组件递归：所以组件递归利用的是vue组件中的name属性来实现的 二、需求 实现可折叠动态渲染多级侧边栏导航 三、分析 1、观察到侧边栏导航是一级一级的，第二.
vue+elementui实现多层树形菜单
10-16
一个完整的树形菜单demo，下载即可运行，包含node_module包，使用vue+el-menu完成多层树形菜单。内含模拟数据格式。
element动态创建多级菜单
04-14
这个简单的项目是element和vue搭建的，里面实现了element动态创建多级菜单，包括水平和垂直的，以及简单路由的实现，适合初学者可以借鉴
vue3、Element-Plus，el-menu，Collapse折叠展开动画显示。组件与组件之间传参
jso_cc的博客
08-03 9555
这个插件不能直接使用必须暴露出来才能使用，和element-plus差不多。我们写一个utils。在utils里面新建一个eventbus.ts，新建js的也是行的。首先我的head和menu是分开的2个组件，我的控制开关是放到head组件里面的。所以使用了组件之间相互传参的插件mitt，mitt插件的安装放文章最后。到这里就可以控制menu里面的collapse了，实现折叠展开。接收参数必须放到onMounted里面，使用mitt里面on命令获取head传送过来的值。鄙人新手，有写的不好的地方请包含。..
elementui dropdown实现二级菜单
weixin_43371136的博客
01-06 6240
<el-dropdown @command="handleCommand($event, key)" size="medium" trigger="click" :hide-on-click="false" 是否在点击菜单项后隐藏菜单 v-else :class="value.className" > <span>
基于Vue+elementUI menu组件的动态渲染多级目录
最新发布
qq_41720628的博客
10-09 702
后端接口是，通过父级目录id查询子级目录列表，所以我需要动态渲染一个多级目录，目录深度不确定。我使用了elementUi的menu组件，因为项目是基于Vue2 的所有 是用的。其实可以不使用这样的方式存储menu的路径，elementUI官方提供相应的方法。方式是因为menu组件抽风了，就是没有存储到路径。函数，我把目录的路径存储在menu的index属性里面。第一层第一个-->第二层的第三个-->第三层的第三个。下图是作者的实际项目的代码，仅供参考。父组件script部分，仅供参考。
elementui二级菜单
aitengteng1的博客
05-10 2260
<el-menurouter:default-active="activeIndex"mode="horizontal"@select="handleSelectMenu"> <!--<el-menu-itemstyle="border:none"v-for="(item,index)inmenuData":index="index+''":key="index":route="{name:item.routername}...
Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
热门推荐
无解的菜鸟晖 的博客
12-02 4万+
一、目的 后台管理系统页面的整体结构如图： 实现顶部一级菜单和左侧二级菜单进行响应，选哪个一级菜单时，左侧菜单栏有相对应下的二级菜单，产生联动效果。然后选不同的二级菜单，主体内容区域展示对应内容。 二、效果图 三、具体操作实现 1、用 vue-cli 创建的 Vue 项目后，自己再手动搭建项目的基本目录结构，如图： 2、创建一个公共组件Whole.vue 来实现整体页面结构的布局，通过 div 来进行区域定位和大小设定。 使用 el-menu 组件的 mode ...
【Element ui 的NavMenu二级菜单下拉icon修改】
qq_40312477的博客
07-14 2045
修改element ui 的NavMenu的icon位置与类型
element-ui——二级菜单和顶部导航联动
NanChen的博客
02-14 3082
目前 原本数据结构 const users = [{ id: 1, username: 'normal', password: 'normal', token: 'abcdefghijklmnopqrstuvwxyz', leftMenus: [{ title: '用户管理', key: '/user', name: 'user', icon: 'el-icon-user-solid', rights: ['view', 'edit',
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 组件递归渲染。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值