elementui菜单

ElementUI 菜单组件使用指南

基础菜单

使用 el-menu 创建基础菜单结构，通过 el-menu-item 定义菜单项。

<el-menu>
  <el-menu-item index="1">首页</el-menu-item>
  <el-menu-item index="2">产品</el-menu-item>
  <el-menu-item index="3">关于我们</el-menu-item>
</el-menu>

子菜单

通过 el-submenu 实现嵌套子菜单，结合 el-menu-item-group 可分组显示子项。

<el-menu>
  <el-submenu index="1">
    <template #title>产品</template>
    <el-menu-item index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
  </el-submenu>
</el-menu>

菜单模式

支持 horizontal（水平）和 vertical（垂直）两种布局模式。

<el-menu mode="horizontal">
  <el-menu-item index="1">首页</el-menu-item>
</el-menu>

激活与路由

通过 default-active 设置默认选中项，结合 router 属性实现路由跳转。

<el-menu 
  default-active="/home" 
  router
>
  <el-menu-item index="/home">首页</el-menu-item>
</el-menu>

动态菜单

通过 v-for 动态生成菜单项，适合从后端获取数据渲染。

<el-menu>
  <el-menu-item 
    v-for="item in menuList" 
    :key="item.id" 
    :index="item.path"
  >
    {{ item.title }}
  </el-menu-item>
</el-menu>

菜单事件

监听 select 事件处理菜单项点击逻辑。

<el-menu @select="handleMenuSelect">
  <el-menu-item index="1">首页</el-menu-item>
</el-menu>

methods: {
  handleMenuSelect(index) {
    console.log('选中菜单:', index);
  }
}

主题与样式

通过 background-color、text-color 等属性自定义菜单样式。

<el-menu
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
>
  <el-menu-item index="1">首页</el-menu-item>
</el-menu>

折叠菜单

结合 collapse 属性实现菜单折叠功能，常用于侧边栏。

<el-menu :collapse="isCollapse">
  <el-menu-item index="1">首页</el-menu-item>
</el-menu>

图标支持

使用 icon 属性或插槽为菜单项添加图标。

<el-menu>
  <el-menu-item index="1">
    <el-icon><home /></el-icon>
    <span>首页</span>
  </el-menu-item>
</el-menu>