先看效果,一级标题 有子级,也存在没有子级的一级标签,同时这个没有子级的一级标签也能点击
上代码
<template>
<el-menu
active-text-color="black"
background-color="#a1afc9"
class="el-menu-vertical-demo"
text-color="#e3f9fd"
router
:default-active="activeIndex"
>
// 遍历菜单
<div v-for="menu in menuList">
// 判断菜单是否含有子级
<el-sub-menu v-if="menu.children && menu.children.length>0">
<template #title>
<el-icon><svg-icon :icon="menu.icon"/></el-icon>
<span>{
{ menu.name }}</span>
</template>
<el-menu-item v-for="item in menu.children" :index="item.path" @click="openTabs(item)">
<el-icon><svg-icon :icon="item.icon"/></el-icon>
<span>{
{ item.name }}</span>
</el-menu-item>
</el-sub-menu>
// 没有子级菜单
<el-menu-item :index="menu.path" v-else @click="closemenu">
<template #title>
<el-icon><svg-icon :icon="menu.icon"/></el-icon>
<span>{
{ menu.name }}</span>
</template>
</el-menu-item>
</div>
</el-menu>
</template>