场景：vue+element动态匹配多级菜单
//循环菜单树
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
router
@select="handleSelect"
>
<template v-for="(item,index) in routerArr">
//第一级，如果没有下级菜单，则直接显示，否则，进行二级菜单判断
<el-menu-item :key="index" v-if="!item.children||!item.children.length>0" :index="item.router">{{item.title}}</el-menu-item>
//二级菜单判断
<el-submenu :key="index" v-else :index="item.router">
<template slot="title">{{item.title}}</template>
// 二级菜单树循环
<template v-for="(val,ind) in item.children">
// 这里判断如果没有三级菜单，则直接显示
<el-menu-item v-if="!val.children" :key="ind" :index="val.router">
<template>
{{val.title}}
</template>
</el-menu-item>
//三级菜单显示
<template v-else>
<el-submenu :key="ind" :index="val.router">
<template slot="title">
{{val.title}}
</template>
//三级菜单循环
<el-menu-item v-for="(tem,indx) in val.children" :key="indx" :index="tem.router"> {{tem.title}}
</el-menu-item>
</el-submenu>
</template>
</template>
</el-submenu>
</template>
</el-menu>
routerArr:[
{
router:'/dashboard',
title:'一级菜单',
},
{
router:'/dbuser',
title:'二级菜单',
children:[
{
router:'/userLabel',
title:'二级菜单跳转1',
},
{
router:'/around',
title:'二级菜单跳转2',
},
{
router:'/itSystem',
title:'二级菜单跳转3',
},
]
},
{
router:'/dictionary',
title:'三级菜单',
children:[
{
router:'/dictionary11',
title:'三级菜单1',
children:[
{
router:'/dictionary111',
title:'三级菜单跳转1-1',
},
{
router:'/dictionary1112',
title:'三级菜单跳转1-2',
},
{
router:'/dictionary113',
title:'三级菜单跳转1-3',
},
]
},
{
router:'/dictionary12',
title:'三级菜单2',
children:[
{
router:'/dictionary121',
title:'三级菜单跳转2-1',
},
{
router:'/dictionary122',
title:'三级菜单跳转2-2',
},
]
}
]
},
]
