效果如下
菜单代码如下
<el-menu
:default-active="menuDefaultActive"
class="el-menu-box"
:text-color="menuTextColor"
:active-text-color="menuActiveTextColor"
:unique-opened="true"
>
<!-- 一级菜单 -->
<template v-for="item in appMenuInfoList">
<el-submenu
v-if="item.menuList && item.menuList.length"
:index="item.onlyID"
:key="item.index"
class="second_menu"
>
<template slot="title">
<i :class="item.icon" v-if="item.icon" />
<span v-if="item.systemName">{{
item.systemName
}}</span></template
>
<!-- 二级菜单 -->
<template v-for="itemChild in item.menuList">
<el-submenu
v-if="itemChild.menuList && itemChild.menuList.length"
:index="itemChild.onlyID"
:key="itemChild.index"
class="last_menu"
>
<template slot="title"
><span>
{{ itemChild.sysName || itemChild.systemName }}</span
></template
>
<!-- 三级菜单 -->
<el-menu-item
v-for="itemChild_Child in itemChild.menuList"
:index="itemChild_Child.onlyID"
:key="itemChild_Child.index"
@click="handleMenuSelect(itemChild_Child)"
>
<span slot="title"
>{{
itemChild_Child.sysName || itemChild_Child.systemName
}}
</span>
</el-menu-item>
</el-submenu>
<el-menu-item
v-else
:index="itemChild.onlyID"
:key="itemChild.index"
@click="handleMenuSelect(itemChild)"
><span slot="title">
{{ itemChild.sysName || itemChild.systemName }}</span
></el-menu-item
>
</template>
</el-submenu>
<el-menu-item
v-else
:index="item.onlyID"
:key="item.index"
@click="handleMenuSelect(item)"
><span slot="title">
{{ item.sysName || item.systemName }}</span
></el-menu-item
>
</template>
</el-menu>