eladmin框架菜单水平

elAdmin是一个基于Vue.js的开源管理后台框架，它提供了丰富的功能和组件，包括灵活的菜单设计。关于菜单的水平布局，elAdmin通过`el-menu`组件来实现。`el-menu`组件支持多种显示模式，其中包括水平导航模式(`horizontal`)。

在elAdmin中创建一个水平菜单通常会像这样配置：

<template>
  <el-menu
    :default-active="router.meta.path"
    router
    :collapse="isCollapsed"
    @open-change="handleMenuClick"
    class="el-menu-vertical-demo">
    <el-submenu v-for="(item, index) in menuItems" :index="index">
      <template slot="title">{{ item.name }}</template>
      <el-menu-item-group title="Group {{ index + 1 }}">
        <el-menu-item v-for="subItem in item.subItems" :key="subItem.name" :index="subItem.url">{{ subItem.name }}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: true,
      menuItems: [
        // ... 你的菜单项配置
      ]
    }
  },
  methods: {
    handleMenuClick(isOpen) {
      this.isCollapsed = !isOpen;
    }
  }
}
</script>

在这里，`:default-active`用于设置默认选中的菜单项，`router`属性则使得菜单项可以响应路由变化。`@open-change`事件监听菜单展开和折叠状态的变化。`el-menu-item-group`用于分组展示子菜单。