el-menu多级菜单
时间: 2023-08-24 15:09:21 浏览: 112
多级菜单功能
3星 · 编辑精心推荐
el-menu 组件支持多级菜单的创建。您可以通过嵌套 el-menu-item 和 el-submenu 组件来实现多级菜单的效果。
以下是一个示例代码,展示如何创建一个两级的 el-menu 多级菜单:
```html
<template>
<el-menu>
<el-menu-item index="1">菜单项1</el-menu-item>
<el-submenu index="2">
<template slot="title">菜单项2</template>
<el-menu-item index="2-1">子菜单项1</el-menu-item>
<el-menu-item index="2-2">子菜单项2</el-menu-item>
</el-submenu>
</el-menu>
</template>
```
在上述代码中,我们使用了 el-menu 组件,并在其中嵌套了两个 el-menu-item 组件和一个 el-submenu 组件。其中,el-submenu 组件用于创建一个子菜单,通过设置 slot="title" 来定义子菜单的标题。在 el-submenu 组件内部,我们可以继续嵌套 el-menu-item 组件来创建更多级的菜单。
您可以根据需要嵌套多个 el-submenu 组件来创建更深层次的多级菜单。同时,您可以通过设置不同的 index 属性来确定每个菜单项的唯一标识。
希望这个示例能够帮助到您!如果您还有其他问题,请随时提问。
阅读全文