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

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

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

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

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

解决方法:

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

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

数据部分:

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),动态多级菜单实现

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)