这篇文章主要介绍了Element-Ui组件 NavMenu 导航菜单的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文来源于Element官方文档：
基础用法
普通导航菜单
<el-menu :default-active="activeIndex" 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" target="_blank">订单管理</a></el-menu-item> </el-menu>
垂直导航条
<el-menu default-active="2" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title"> <i></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></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i></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" @open="handleOpen" @close="handleClose" :collapse="isCollapse"> <el-submenu index="1"> <template slot="title"> <i></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></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i></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: