使用element写一个竖排显示的菜单
可以使用element-ui的Menu组件来实现竖排显示的菜单。以下是一个示例代码:
<template>
<div>
<el-menu>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</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-group>
<template slot="title">分组二</template>
<el-menu-item index="1-3">选项3</el-menu-item>
<el-menu-item index="1-4">选项4</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span>导航三</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: 'MenuDemo',
}
</script>
在这个示例中,我们使用了el-menu组件创建了一个菜单。el-submenu用于创建子菜单,el-menu-item用于创建菜单项。通过设置index属性来指定每个菜单项的唯一标识。你可以根据需要添加更多的菜单项和子菜单。
你可以根据自己的需求进一步自定义菜单的样式和功能。详细的使用方法可以参考element-ui的官方文档
原文地址: https://www.cveoy.top/t/topic/ic6y 著作权归作者所有。请勿转载和采集!