记录一下两级的el-menu菜单
1.html代码
<el-menu router :collapse="isCollapse" :default-active="$route.path">
<template v-for="(item, index) in items" >
// 没有子菜单的
<el-menu-item v-if="item.type !== 'config'" :key="index" :index="item.path">
<template>
<i :class="item.icon"></i>
<span slot="title">{{ item.text }}</span></template>
</el-menu-item>
// 有子菜单的
<el-submenu v-else :index="item.path" :key="index">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{ item.text }}</span>
</template>
<el-menu-item-group v-for="(n, i) in item.child" :key="i">
<el-menu-item :index="n.path">
<template>
<i :class="n.icon"></i>
<span slot="title">{{ n.text }}</span>
</template>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</template>
</el-menu>
2.数据结构:
items = [
{
text: 'Backlog',
path: '/backlog',
icon: 'el-icon-folder',
type: 'back'
},
{
text: 'Config',
path: '/config',
icon: 'el-icon-s-tools',
type: 'config',
child: [
{
text: 'Confi1',
path: '/config',
icon: 'el-icon-s-cooperation',
},
{
text: 'Config2',
path: '/config2',
icon: 'el-icon-s-platform',
}
]
},
]