<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1"></el-menu-item>
<el-submenu index="2">
<template slot="title"></template>
<el-menu-item index="2-1">1</el-menu-item>
<el-menu-item index="2-2">2</el-menu-item>
<el-menu-item index="2-3">3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">4</template>
<el-menu-item index="2-4-1">1</el-menu-item>
<el-menu-item index="2-4-2">2</el-menu-item>
<el-menu-item index="2-4-3">3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled></el-menu-item>
</el-menu>
I want to pass in the data to achieve this effect, but different types of menu labels are different, v-for can only be written in the tag, how can I control the judgment?
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1" v-for="menu in menus" v-bind:key="menu.id">
<template slot="title" v-if="menu.type == 1" >
<i :class="menu.icon"></i>
<span slot="title">{{ menu.name }}</span>
</template>
</el-submenu>
<el-menu-item index="2" v-esle>
<template slot="title">
<i :class="menu.icon"></i>
<span>{{ menu.name }}</span>
</template>
<el-menu-item-group>
<template slot="title"></template>
<el-menu-item index="1-1">1</el-menu-item>
<el-menu-item index="1-2">2</el-menu-item>
</el-menu-item-group>
</el-menu-item>
</el-menu>