el-element中导航菜单的使⽤el-menu
在进⾏vue开发的时候，我们不可避免会使⽤到导航菜单，element⽅便的为我们提供了导航菜单组件，我们可以轻松创建⾃⼰的导航菜单。
不过el-menu属性和⽅法复杂多样，在此只列举常⽤的属性和⽅法，更多的使⽤说明可以参考官⽅⼿册
<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>
为在该级所展⽰的内容，如此时为⼀级菜单的图标和⽂本

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。