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

未经允许不得转载：Web前端开发资源网 » Element UI导航菜单(NavMenu)，动态多级菜单实现

推荐阅读：

使用flexible后 不同设备的data-dpr还始终为1解决方法

MongoDB的简单配置和基本数据操作

在Webstorm中使用Autoprefixer实现CSS自动补全

QQ聊天插件，鼠标划入划出显示隐藏效果。

PHP连接MySQL数据库报错：Call to undefined function mysql_connect()的解决方法