element ui 同时横向菜单
时间: 2023-08-22 13:09:17 浏览: 102
您好!要在 Element UI 中实现同时横向显示的菜单,您可以使用 `el-menu` 和 `el-menu-item` 组件结合布局样式来实现。下面是一个示例代码,展示如何实现同时横向显示的菜单:
```html
<template>
<div>
<el-menu mode="horizontal">
<el-menu-item index="1">选项1</el-menu-item>
<el-menu-item index="2">选项2</el-menu-item>
<el-menu-item index="3">选项3</el-menu-item>
<el-menu-item index="4">选项4</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: 'YourComponent',
// 在这里添加其他组件配置和方法
}
</script>
<style scoped>
/* 在这里添加自定义的样式 */
</style>
```
在这个示例中,我们使用 `el-menu` 组件设置 `mode` 属性为 "horizontal",以实现横向菜单的效果。然后,使用 `el-menu-item` 组件添加菜单项,并通过设置 `index` 属性来标识每个菜单项。
您可以根据自己的需求修改菜单项的内容和样式,也可以添加其他配置和方法来完善您的组件。希望这可以帮助到您!如果还有其他问题,请随时提问。
阅读全文