element NavMenu多级导航菜单渲染

最新推荐文章于 2023-10-09 21:29:56 发布
最新推荐文章于 2023-10-09 21:29:56 发布
阅读量487 收藏
点赞数 1
文章标签： javascript html html5 elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fj101113/article/details/120654365
版权
第一步：新建一个组件navMenu.vue

html

<label v-for="(item, index) in navlist" :key="index">
	<el-submenu
        v-show="item.adminMenu.menuType == 'list'"
        :index="item.adminMenu.index.toString()"
        @mouseenter.native="collapseOpen(index)"
        @mouseleave.native="collapseClose(index)"
        @click="menuClick(item.adminMenu.index)">
      <template slot="title">
        <i
          :class="[
            item.adminMenu.icon,
            { legend: isHover && select === index },
          ]"
        ></i>
        <span :class="{legend: isHover && select === index}">{{ item.adminMenu.d_department }}</span>
      </template>
      <NavMenu :navlist="item.children"></NavMenu>
    </el-submenu>
    <el-menu-item
      v-show="item.adminMenu.menuType == 'page'"
      :index="item.adminMenu.index.toString()"
      @mouseenter.native="collapseOpen(index)"
      @mouseleave.native="collapseClose(index)"
      @click="menuClick(item.adminMenu.index)"
    >
      <template slot="title">
        <!-- <i class="el-icon-s-cooperation"></i> -->
        <i
          :class="[
            item.adminMenu.icon,
            { legend: isHover && select === index },
          ]"
        ></i>
        <span :class="{legend: isHover && select === index}">{{ item.adminMenu.d_department }}</span>
      </template>
    </el-menu-item>
    <el-menu-item
      v-show="item.adminMenu.menuType == 'menu'"
      :index="item.adminMenu.index.toString()"
      @mouseenter.native="collapseOpen(index)"
      @mouseleave.native="collapseClose(index)"
      @click="menuClick(item.adminMenu.index)">
      <i
          :class="[
            item.adminMenu.icon,
            { legend: isHover && select === index },
          ]"
        ></i>
      <span slot="title" :class="{legend: isHover && select === index}">{{ item.adminMenu.d_department }}</span>
    </el-menu-item>      
</label>

javaScript

props: ["navlist"]
第二步：页面引用组件

html

<el-menu
	:default-active="$route.path"
    class="el-menu-vertical-demo"
    :collapse-transition="false"
    :unique-opened="true"
    @select="activationBtn"
    :collapse="$store.state.isCollapse"
>
    <NavMenu :navlist="list"></NavMenu>
</el-menu>

javaScript

// 假数据
list: [
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "系统首页",
            menuType: "list",
            index: "1",
            icon: 'iconfont icon-shouye-'
          },
          children: [
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "工作台",
                menuType: "page",
                index: "1-1",
              },
            },
            {
              adminMenu: {
                d_id: "daf54c5d-a5d1-c045-677e-d0cffcaf4d9a",
                d_pid: "18340fd9-84bf-f470-b20b-428c70edbbc5",
                d_department: "数据统计",
                menuType: "page",
                index: "1-2",
              },
            },
          ],
        },
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "栏目管理",
            menuType: "menu",
            index: "/programManagement",
            icon: 'iconfont icon-liebiao-copy1'
          },
        },
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "文章管理",
            menuType: "list",
            index: "3",
            icon: 'iconfont icon-wenzhang2'
          },
          children: [
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "文章列表",
                menuType: "page",
                index: "/essay"
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "文章分类",
                menuType: "page",
                index: "/essaycategory"
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "文章标签",
                menuType: "page",
                index: "/essay/tags"
              },
            },
          ],
        },
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "产品管理",
            menuType: "list",
            index: "4",
            icon: 'iconfont icon-chanpin'
          },
          children: [
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "产品列表",
                menuType: "page",
                index: "/product"
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "产品分类",
                menuType: "page",
                index: "/productCategory"
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "产品标签",
                menuType: "page",
                index: "/productTags"
              },
            },
          ],
        },
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "图片管理",
            menuType: "list",
            index: "5",
            icon: 'iconfont icon-tupian'
          },
          children: [
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "图片列表",
                menuType: "page",
                index: "5-1",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "设置水印",
                menuType: "page",
                index: "5-2",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "图片分类",
                menuType: "page",
                index: "/pictureCategory",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "图片标签",
                menuType: "page",
                index: "/pictureTags",
              },
            },
          ],
        },
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "视频管理",
            menuType: "list",
            index: "6",
            icon: 'iconfont icon-video-fill'
          },
          children: [
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "视频列表",
                menuType: "page",
                index: "6-1",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "设置水印",
                menuType: "page",
                index: "6-2",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "视频分类",
                menuType: "page",
                index: "6-3",
              },
            },
          ],
        },
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "文件管理",
            menuType: "list",
            index: "7",
            icon: 'iconfont icon-wenjian'
          },
          children: [
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "文件列表",
                menuType: "page",
                index: "/fileList",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "文件分类",
                menuType: "page",
                index: "/fileCategory",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "文件标签",
                menuType: "page",
                index: "/fileTags",
              },
            },
          ],
        },
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "留言管理",
            menuType: "menu",
            index: "8",
            icon: 'iconfont icon-liuyanfill'
          },
        },
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "拓展项管理",
            menuType: "list",
            index: "9",
            icon: 'iconfont icon-icon_huabanfuben'
          },
          children: [
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "友情链接",
                menuType: "page",
                index: "9-1",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "网站联系信息",
                menuType: "page",
                index: "9-2",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "自媒体账号",
                menuType: "page",
                index: "9-3",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "隐私条款&版权信息",
                menuType: "page",
                index: "9-4",
              },
            },
          ],
        },
        {
          adminMenu: {
            d_id: "",
            d_pid: "0",
            d_department: "系统设置",
            menuType: "list",
            index: "10",
            icon: 'iconfont icon-weibiaoti103'
          },
          children: [
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "网站设置",
                menuType: "page",
                index: "10-1",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "用户管理",
                menuType: "page",
                index: "10-2",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "敏感词设置",
                menuType: "page",
                index: "10-3",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "配置管理",
                menuType: "page",
                index: "10-4",
              },
            },
            {
              adminMenu: {
                d_id: "",
                d_pid: "",
                d_department: "操作日志",
                menuType: "page",
                index: "10-5",
              },
            },
          ],
        },
      ]
怀中猫@j
关注
element ui 菜单封装_vue+element UI实现多级导航菜单
weixin_35740545的博客
02-15 1276
1.前言在某次日常开发中，项目要求页面的导航菜单需要动态加载，即菜单不能在页面上写死，菜单上的数据由后端开发从数据库中获取返回给前端使用，前端拿到数据后再通过解析数据最终将菜单渲染出来。由于菜单有可能是多级的，所以我们需要使用递归的方式，一层一层的递归数据，将多级菜单完整显示出来。本篇博文借助element UI组件库中的Navmenu导航菜单组件，将其进行改造后封装成一个多级导航菜单组件。2.工...
Vue中ElementUI多级导航菜单动态加载——递归
_
03-29 9103
在前后端分离项目中，前端要实现根据后端传来的json格式数据，进行多级导航菜单的动态加载，层级数目较小或者各个层级的数目固定情况下，可以编辑固定数目的父子导航组件，与后端数据对应方可。但是，后期需要调整菜单父子关系或者说动态增删菜单，会导致菜单数据层级关系不确定，比如说某一个层级菜单有2个子菜单，而与之同级的菜单有非2个子菜单，这就不能按照之前固定格式的代码进行渲染了，可以借助递归思想，将动态加载...
详解VUE Element-UI多级菜单动态渲染的组件
10-17
主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementUI 多级菜单动态渲染
weixin_34252686的博客
08-28 1616
侧边栏导航菜单在平常 CMS 管理平台开发中很常见，最近在产品开发中就遇到难题： 公司采用的是 vue + element 技术栈，element 文档中 NavMenu 是写死的，而不是通过数据渲染的，菜单多、层级深的时候，就很鸡肋... 再参考 此链接 后，再结合自己需求，组装成 kgMenu 组件 kgMenu 里面封装 kgSubMenu、kgMenuGroup、kgMenuItem 三个...
Element-UI的NavMenu组件实现递归渲染深层次树状菜单
sleepwalker_1992的专栏
07-06 1159
el-menu实现递归渲染深层次树状菜单
基于Vue+elementUI menu组件的动态渲染多级目录
最新发布
qq_41720628的博客
10-09 890
后端接口是，通过父级目录id查询子级目录列表，所以我需要动态渲染一个多级目录，目录深度不确定。我使用了elementUi的menu组件，因为项目是基于Vue2 的所有 是用的。其实可以不使用这样的方式存储menu的路径，elementUI官方提供相应的方法。方式是因为menu组件抽风了，就是没有存储到路径。函数，我把目录的路径存储在menu的index属性里面。第一层第一个-->第二层的第三个-->第三层的第三个。下图是作者的实际项目的代码，仅供参考。父组件script部分，仅供参考。
el-menu动态渲染多级菜单
starstarstarl的博客
06-06 1681
子组件：根据菜单数组的结构自行修改pagePojoList，pageUrl，kid，name，及自定义图标。思路：创建子菜单递归组件，这里我命名为MySubMenu.vue。父组件：引用自定义组件MySubMenu，将菜单数组传递给子组件。
ElmentUI的NavMenu组件动态封装
01-08
综上所述，通过递归地动态封装Element UI的NavMenu组件，可以创建出一个灵活且功能强大的导航菜单系统。这不仅可以提高开发效率，还可以根据不同的需求灵活地定制和扩展，为用户提供更好的交互体验。
vue2 elementUI递归渲染多级菜单栏
全易
04-26 1806
需要将组件拆分为两个：菜单栏容器一个，菜单栏列表一个 菜单栏列表 <template> <div class="menu-list"> <template v-for="item in data"> <el-submenu v-if="item.children.length > 0" :key="item.menuIdStr" :index="item.menuIdStr"
分享一个VUE Element-UI 的多级菜单动态渲染的组件
热门推荐
王世春的博客
12-23 5万+
以下是组件代码：&lt;template&gt; &lt;div class="navMenu"&gt; &lt;label v-for="navMenu in navMenus"&gt; &lt;el-menu-item v-if="navMenu.childs==null&amp;&amp;navMenu.entity&amp;&amp;na
Vue3 + Element Plus 多级嵌套菜单动态渲染
Yana's Blog
08-30 3137
动态渲染多级嵌套菜单点击菜单跳转页面子菜单高亮，对应父级菜单也高亮不同路由高亮同一菜单。
Element-UI 的多级菜单动态渲染的组件
Allen-Ye博客
06-03 958
在平时工作中，我们经常会遇到多级菜单的渲染，今天我们就做个组件，动态渲染下 实现的效果如下 首先先封装一个menu子组件 <template> <div> <template v-for="item in libraryMenu" > <el-submenu :index="item.id" v-if="item.children.length>0" :key="item.id">
动态渲染NavMenu导航（vue-router）
慢腾腾的急性子
10-29 7471
这里是根据vue-router和element-ui中的NavMenu进行组合。根据路由配置动态的渲染NavMenu 注意: // 获取到所有的路由 routes=this.$router.options.routes 通常将这个路由分开，分为父组件和子组件 父组件： &lt;el-menu :default-active="$route.path" router&gt; &lt;menuI...
element - NavMenu 导航菜单，针对于复杂的导航栏（不定级、多级）动态渲染的组件开发
吃瓜群众的博客
06-14 6072
针对于多级导航菜单栏的遍历的组件开发 实现效果如图所示， 1、router.js // Layout.vue 和 Main.vue 都是vue容器, 前者为全空的容器 import Vue from 'vue' import Router from 'vue-router' import Login from '../views/Login.vue' import Layout from '...
在Vue中使用Element UI的NavMenu 导航菜单时，渲染数据出现的报错
m0_52043522的博客
03-12 2046
1、[Vue warn]: Method "computed" has type "object" in the component definition. Did you reference the function correctly? 运行项目，发现报错，查看了错误原因，竟然粗心地将computed计算属性放在了methods中，它们俩应该是同级的，改成同级之后错误就消失了。 2、在通过遍历的方式进行页面的渲染时，发生报错如下： [Vue warn]: Invalid prop: type ch
vue 动态多级导航菜单
LONGLONGAGO_RU的博客
11-12 3150
1，创建vue的左侧导航栏组件 <template> <div> <!-- 根据实际情况做修改 --> <el-menu-item v-for="(item,index) in navlist" :key="index" v-if="item.adminMenu.menuType =='page'" ...
vue+elementUI实现动态渲染二级导航菜单列表
super码力的博客
08-09 3596
vue结合elementUI实现后台数据动态渲染二级导航菜单列表
Vue项目菜单导航封装（一级菜单在上面，二级三级菜单在左侧）
qq_45256497的博客
03-25 1万+
Vue项目菜单导航封装（一级菜单在上面，二级三级菜单在左侧），element-ui菜单导航封装
element ui NavMenu 实现侧边栏导航菜单
Igiveufireworks的博客
05-08 2016
使用Element UI 的 Container 布局容器和NavMenu导航菜单组件，使用router-view存放二级路由出口。根据v-for遍历菜单参数，渲染导航栏。
Element UI：NavMenu 导航菜单实战指南
本文主要探讨了Element UI框架中的NavMenu导航菜单组件的使用方法，通过实例代码详细解析了如何创建和配置水平模式的导航菜单，包括菜单项、子菜单及禁用状态的设置，旨在帮助开发者提升其在网页应用开发中的实践...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值