可以使用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的官方文档

使用element写一个竖排显示的菜单

原文地址: https://www.cveoy.top/t/topic/ic6y 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录