前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Element UI导航菜单(NavMenu),动态多级菜单实现

Element UI导航菜单(NavMenu),动态多级菜单实现

作者头像
德顺
发布2020-12-28 11:21:55
14.9K0
发布2020-12-28 11:21:55
举报
文章被收录于专栏:前端资源

今天同事封装一个导航栏的组件,使用的 Element UI 的 NavMenu 组件。

遇到一个问题,如果菜单没有下拉是 <el-menu-item /> 标签,而有下拉的是 <el-submenu /> 标签。

在循环遍历的时候就出了问题,必须要判断一下是否有二级菜单,并区分展示。

使用 div 包裹,改变组件的标签结果,就会导致报错,无法正常显示。

解决方法:

套一个 template 标签做 v-for 遍历,然后判断是否有二级菜单,并给  <el-submenu /> 或  <el-menu-item /> 标签 :key="key" 属性。

代码语言:javascript
复制
<el-menu
  :default-active="activeIndex"
  class="el-menu-demo"
  mode="horizontal"
>
  <template v-for="item in NavigateItem">
    <el-submenu v-if="item.items.length" :index="item.key" :key="item.key">
      <template slot="title">
        {{ item.title }}
      </template>
      <el-menu-item
        v-for="(items, key) in item.items"
        :key="key"
        :index="items.key"
      >
        {{ items.title }}
      </el-menu-item>
    </el-submenu>
    <el-menu-item v-else :index="item.key" :key="item.key">
    {{ item.title }}
    </el-menu-item>
  </template>
</el-menu>

数据部分:

代码语言:javascript
复制
NavigateItem: [
  {
    title: "首页",
    key: "1",
    path: "",
    items: [],
  },
  {
    title: "找人才",
    key: "2",
    path: "",
    items: [
      {
        title: "选项1",
        key: "2-1",
        path: "",
      },
      {
        title: "选项2",
        key: "2-2",
        path: "",
      },
    ],
  },
  {
    title: "找资金",
    key: "3",
    path: "",
    items: [
      {
        title: "选项1",
        key: "3-1",
        path: "",
      },
      {
        title: "选项2",
        key: "3-2",
        path: "",
      },
    ],
  },
  {
    title: "提身价",
    key: "4",
    path: "",
    items: [
      {
        title: "选项1",
        key: "4-1",
        path: "",
      },
      {
        title: "选项2",
        key: "4-2",
        path: "",
      },
    ],
  },
],

未经允许不得转载:w3h5 » Element UI导航菜单(NavMenu),动态多级菜单实现

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决方法:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档