本文来源于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" style="margin-bottom: 20px;">
<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
—
—
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com