今天同事封装一个导航栏的组件，使用的 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>数据部分：
代码语言：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)，动态多级菜单实现
