el-menu 递归菜单 包含 el-menu-item-group 如何处理
时间: 2023-02-05 20:47:00 浏览: 176
3.(vue3.x+vite)el-tree组件(数组结构数据转树结构数据).rar
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 组件来定
阅读全文