element导航菜单控制当前菜单样式

直接使用Element的导航菜单组件,参考官方文档:http://element-cn.eleme.io/#/zh-CN/component/menu

问题1:设置当前的导航样式,直接使用自带属性控制就可以。

<el-menu :default-active="$route.path"
:unique-opened="true"
class="el-menu-demo"
@select="handleSelect"
background-color="rgba(0,0,0,0)"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-submenu index="1">
<template slot="title">
<!--<i class="el-icon-location"></i>-->
<img src="/static/images/icon/ic1.png" alt="" class="ic-pic">
<span>运营中心</span>
</template>
<el-menu-item-group>
<el-submenu index="1-1">
<template slot="title">
<span>审核中心</span>
</template>
<el-menu-item-group>
<el-menu-item index="../index/auditHistory">
技术员审核
</el-menu-item>
<el-menu-item index="1-2">维保圆审核</el-menu-item>
<el-menu-item index="/index/propertyList">物业公司审核</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="/operation/businessList">业务列表</el-menu-item>
</el-menu-item-group>
</el-submenu>

<el-submenu index="2">
<template slot="title">
<!--<i class="el-icon-location"></i>-->
<img src="/static/images/icon/ic2.png" alt="" class="ic-pic">
<span>电梯管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/ElevatorManagement">
统计看板
</el-menu-item>
<el-menu-item index="2-2">维保数据</el-menu-item>
<el-menu-item index="">警报数据</el-menu-item>
<el-menu-item index="/ElevatorManagement/ElevatorList">列表查看</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="8">
<template slot="title">
<!--<i class="el-icon-location"></i>-->
<img src="/static/images/icon/ic1.png" alt="" class="ic-pic">
<span>广告管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/advertisement/advertiserList">
广告列表
</el-menu-item>
<el-menu-item index="/advertisement/">广告设置</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="9">
<img src="/static/images/icon/ic8.png" alt="" class="ic-pic">
<span slot="title">大数据中心</span>
</el-menu-item>
</el-menu>
@select="handleSelect"给菜单添加点击事件
事件的定义:
handleSelect(key, keyPath) {
  //key是index属性值,index可以直接设置路径。
this.$router.push({path:key})
},
这样就完成了,点击菜单跳转后自动保存当前菜单的状态。

问题2:只保持一个菜单展开
unique-opened 是否只保持一个子菜单的展开

猜你喜欢

转载自www.cnblogs.com/xiaomg/p/10387098.html