直接使用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" 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" 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" 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" 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 是否只保持一个子菜单的展开
原文地址：https://www.cnblogs.com/xiaomg/p/10387098.html
时间： 2024-10-03 08:52:04