用element-ui生成菜单项
时间: 2023-06-30 13:07:34 浏览: 103
你可以使用 Element UI 的 Menu 组件来生成菜单项。以下是一个简单的示例:
```html
<template>
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" router>
<el-menu-item index="/">
<i class="el-icon-menu"></i>
<span>首页</span>
</el-menu-item>
<el-submenu index="sub1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="/page1">页面一</el-menu-item>
<el-menu-item index="/page2">页面二</el-menu-item>
</el-submenu>
<el-submenu index="sub2">
<template slot="title">
<i class="el-icon-menu"></i>
<span>导航二</span>
</template>
<el-menu-item index="/page3">页面三</el-menu-item>
<el-menu-item index="/page4">页面四</el-menu-item>
</el-submenu>
</el-menu>
</template>
```
在上面的示例中,我们使用了 `el-menu` 组件来创建一个垂直菜单,使用 `el-menu-item` 和 `el-submenu` 组件来创建菜单项和子菜单项。其中 `index` 属性用于指定路由路径,`router` 属性用于开启路由模式,`default-active` 属性用于指定默认选中项。
你可以根据自己的需求来调整菜单项的样式和内容。更多关于 Element UI 的 Menu 组件的用法,请参考官方文档:https://element.eleme.io/#/zh-CN/component/menu。
阅读全文