el-element中导航菜单的使用el-menu

在进行vue开发的时候，我们不可避免会使用到导航菜单，element方便的为我们提供了导航菜单组件，我们可以轻松创建自己的导航菜单。
不过el-menu属性和方法复杂多样，在此只列举常用的属性和方法，更多的使用说明可以参考官方手册
element官方使用说明

<el-aside :width="iscollapse ? '64px' : '200px'">
	<div class="toggle-button" @click='toggleCollapse'>|||</div>
	<!-- 侧边栏菜单区域 -->
	<el-menu
	background-color="#333744"
	text-color="#fff"
	active-text-color="#409eff" :unique-opened='true' :collapse='iscollapse' :collapse-transition='false' :router='true' :default-active='activePath'>
		<!-- 一级菜单 -->
		<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
			<template slot="title">
				<!-- 图标 -->
				<i :class="iconobj[item.id]"></i>
				<!-- 文本 -->
				<span>{{item.authName}}</span>
			</template>
			<!-- 二级菜单 -->
			<el-menu-item :index="'/' + subitem.path" v-for='subitem in item.children' :key='subitem.id' @click='savenavStates("/" + subitem.path)'>
				<template slot="title">
				<!-- 图标 -->
				<i class="el-icon-menu"></i>
				<!-- 文本 -->
				<span>{{subitem.authName}}</span>
			</template>
			</el-menu-item>
		</el-submenu>
	</el-menu>
</el-aside>

对于el-menu

参数	说明	可选值
default-active	当前激活菜单的index
collapse	是否水平折叠收起菜单	true/false
mode	当前模式	horizontal / vertical
background-color	菜单栏背景色	仅支持hex格式
text-color	文字颜色	仅支持hex格式
active-text-color	激活的文字颜色	仅支持hex格式
unique-opened	是否只保持一个子菜单展开	true/false
router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

对于el-submenu

参数	说明	可选值
index	子菜单的唯一标识
popper-append-to-body	是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性

其中

<template slot="title">
	<!-- 图标 -->
	<i :class="iconobj[item.id]"></i>
	<!-- 文本 -->
	<span>{{item.authName}}</span>
</template>

为在该级所展示的内容，如此时为一级菜单的图标和文本