本文来源于Element官方文档：
http://element-cn.eleme.io/#/zh-CN/component/menu
基础用法
普通导航菜单
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" rel="external nofollow" target="_blank">订单管理</a></el-menu-item>
</el-menu>
垂直导航条
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<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 title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
折叠导航条
<el-radio-group v-model="isCollapse" >
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<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 title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
Menu Attribute：
| 参数 |
类型 |
说明 |
可选值 |
默认值 |
| mode |
模式 |
string |
horizontal / vertical |
vertical |
| collapse |
是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） |
boolean |
— |
false |
| background-color |
菜单的背景色（仅支持 hex 格式） |
string |
— |
ffffff |
| text-color |
菜单的文字颜色（仅支持 hex 格式） |
string |
— |
303133 |
| active-text-color |
当前激活菜单的文字颜色（仅支持 hex 格式） |
string |
— |
409EFF |
| default-active |
当前激活菜单的 index |
string |
— |
— |
| default-openeds |
当前打开的sub-menu的 key 数组 |
Array |
— |
— |
| unique-opened |
是否只保持一个子菜单的展开 |
boolean |
— |
false |
| menu-trigger |
子菜单打开的触发方式(只在 mode 为 horizontal 时有效) |
string |
— |
hover |
| router |
是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 |
boolean |
— |
false |
Menu Methods:
| 事件名称 |
说明 |
参数 |
| open |
展开指定的 sub-menu index: |
需要打开的 sub-menu 的 index |
| close |
收起指定的 sub-menu index: |
需要收起的 sub-menu 的 index |
Menu Events:
| 事件名称 |
说明 |
回调参数 |
| select |
菜单激活回调 |
index: 选中菜单项的 index, indexPath: 选中菜单项的 index path |
| open |
sub-menu 展开的回调 |
index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path |
| close |
sub-menu 收起的回调 |
index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path |
SubMenu Attribute:
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| mode |
唯一标志 |
string |
— |
— |
| mode |
弹出菜单的自定义类名 |
string |
— |
— |
| mode |
展开 sub-menu 的延时 |
number |
— |
300 |
| mode |
收起 sub-menu 的延时 |
number |
— |
300 |
| mode |
是否禁用 |
boolean |
— |
false |
Menu-Item Attribute:
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| index |
唯一标志 |
string |
— |
— |
| route |
Vue Router 路径对象 |
Object |
— |
— |
| disabled |
是否禁用 |
boolean |
— |
false |
Menu-Group Attribute:
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| title |
分组标题 |
string |
— |
— |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持天达云。