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

德顺

发布于 2023-08-25 05:06:16

1.7K00

代码可运行

文章被收录于专栏：前端资源前端资源

运行总次数：0

代码可运行

今天同事封装一个导航栏的组件，使用的 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: "",
      },
    ],
  },
],