el-menu 支持通过设置 :default-active
属性来设置默认选中的菜单项。如果递归菜单包含 el-menu-item-group 组件,则可以通过在 el-menu-item-group 上设置 :title
属性来设置分组的标题,并在 el-menu-item-group 内部放置 el-menu-item 组件来定义分组内的菜单项。
下面是一个简单的示例:
<template>
<el-menu :default-active="activeIndex">
<el-menu-item v-for="(item, index) in menuList" :key="index" :index="index">
{{ item.text }}
</el-menu-item>
<el-submenu :index="'group'">
<template slot="title">分组</template>
<el-menu-item-group>
<template slot="title">分组 1</template>
<el-menu-item :index="'group1-item1'">分组 1 项 1</el-menu-item>
<el-menu-item :index="'group1-item2'">分组 1 项 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<template slot="title">分组 2</template>
<el-menu-item :index="'group2-item1'">分组 2 项 1</el-menu-item>
<el-menu-item :index="'group2-item2'">分组 2 项 2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: 'item1',
menuList: [
{ text: '项 1' },
{ text: '项 2' },
{ text: '项 3' },
]
}
}
}
</script>
在这个示例中,我们定义了一个 el-menu 组件,并通过 v-for 循环渲染了若干个 el-menu-item 组件。然后,我们使用 el-submenu 组件来定