©2020-2024 ioDraw All rights reserved
template部分
<el-menu default-active="PageHome" //默认打开的页面path class="el-menu-demo"
//添加class 便于设置样式 mode="horizontal" //设置菜单为水平菜单 默认值为vertical
menu-trigger="click" //子菜单打开的方式为点击 默认值hover(只在mode为horizontal时生效)
@select="handleSelect" //菜单激活回调 text-color="#3EF7E1" //菜单文字颜色
:unique-opened="true" //只打开一个子菜单 :router="true" //启用该模式会在激活导航时以 index 作为 path
进行路由跳转 active-text-color="#3EF7E1"> //当前被激活的菜单的文字颜色 <el-menu-item
:index="child1.url" //可进行跳转 v-for="child1 in menuList" //循环 :key="child1.id"
v-if="!child1.childNode"> //如果只有一级 没有子菜单 {{ child1.name }} //显示菜单名称
</el-menu-item> <el-submenu :popper-append-to-body="false" //设置此属性
popper-class才可以生效 popper-class="amenu" //设置class名称 :index="child1.url"
v-for="child1 in menuList" :key="child1.id" v-if="child1.childNode"> //如果有子菜单
<template slot="title">{{ child1.name }}</template> <el-menu-item
:index="child2.url" v-for="child2 in child1.childNode" :key="child2.id"
v-if="!child2.childNode"> {{ child2.name }} </el-menu-item> </el-submenu>
</el-menu>
或者
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
menu-trigger="click" @select="handleSelect" text-color="#3EF7E1"
:unique-opened="true" :router="true" active-text-color="#3EF7E1"> <template
v-for="item in menuList"> <el-submenu
v-if="item.childNode!=''||item.childNode!=null" :key="item.id" :index="item.id"
:class="item.id == 2 ? 'menu2' : 'menu1'"> <template slot="title"> <span>{{
item.name }}</span> </template> <el-menu-item :index="child.id" v-for="child in
item.childNode" :key="child.id"> {{ child.name }} </el-menu-item> </el-submenu>
<el-menu-item v-else :key="item.id" class="menu1" :index="item.id"> {{
item.name }} </el-menu-item> </template> </el-menu>
js部分
export default { name: "NavHeader", data() { return { activeIndex: 'PageHome',
menuList:[ { "name":"监控总览", "pid":0, "id":1, "url":"PageHome", }, {
"name":"设备管理", "pid":0, "id":2, "url":"equipmentManagement", "childNode":[ {
"name":"北斗终端", "pid":2, "id":200, "url":"BDManagement", }, { "name":"接收机",
"pid":2, "id":201, "url":"ReceiverMana", }, { "name":"指挥机", "pid":2, "id":202,
"url":"CommandMana", } ] }, { "name":"统计分析", "pid":0, "id":3,
"url":"statisticalAnalysis", "childNode":[ { "name":"终端在线", "pid":3, "id":300,
"url":"TerminalOnline", }, { "name":"线路负载", "pid":3, "id":301,
"url":"LineLoad", }, { "name":"数据包", "pid":3, "id":302, "url":"DataPackage", },
{ "name":"数据帧", "pid":3, "id":303, "url":"DataFrame", }, { "name":"排队包数",
"pid":3, "id":304, "url":"QueueNumber", } ] }, { "name":"系统管理", "pid":0,
"id":4, "url":"systemManage", "childNode":[ { "name":"用户管理", "pid":4, "id":400,
"url":"HtUser", }, { "name":"角色管理", "pid":4, "id":401, "url":"HtRole", }, {
"name":"巡检管理", "pid":4, "id":402, "url":"InspectionHistory", }, {
"name":"字典管理", "pid":4, "id":403, "url":"dictionaryManage", }, { "name":"服务监控",
"pid":4, "id":404, "url":"serviceControl", }, { "name":"日志管理", "pid":4,
"id":405, "url":"lodManage", }, { "name":"菜单管理", "pid":4, "id":406,
"url":"HtMenu", }, { "name":"系统配置", "pid":4, "id":407,
"url":"SysConfiguration", }, { "name":"组织管理", "pid":4, "id":408,
"url":"organizeManage", } ] } ] }; }, computed: { }, methods: {
handleSelect(key, keyPath) { console.log(key, keyPath); } } };
样式部分
<style scoped> /*菜单样式*/ /*设置字体变粗 设置层级*/ .el-menu-demo{ font-weight: 700;
z-index: 1000; } /*设置li不选中时的背景色 字体大小*/ /deep/ .el-menu-demo li{
background-color: rgb(0, 0, 0, 0.2); font-size: 17px; } /deep/ .el-menu-demo li
.el-submenu__title{ font-size: 17px; } /*去掉右侧小三角形*/ /deep/
.el-submenu__icon-arrow{ display: none; } /*鼠标悬停li背景色*/ /deep/
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, /deep/
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, /deep/
.el-menu--horizontal>.el-submenu .el-submenu__title:hover{ background-color:
#7B7B7B; } /*一级菜单设置高度*/ /deep/ .el-menu--horizontal>.el-menu-item{ height:
100%; line-height: 47px; } /*二级菜单设置高度*/ /deep/ .el-menu--horizontal>.el-submenu
.el-submenu__title{ height: 100%; line-height: 47px; border-bottom:7px solid
#116EA5!important;/*二级列表未选中*/ } /deep/
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
border-bottom:7px solid #3EF7E1!important;/*二级列表选中*/ } /*一级列表未选中*/
.el-menu--horizontal>.el-menu-item{ border-bottom:7px solid #116EA5!important;
} /*一级列表选中*/ .el-menu--horizontal>.el-menu-item.is-active{ border-bottom:7px
solid #3EF7E1!important; } /deep/ .el-menu--horizontal.amenu{ background:
url(../../assets/header/xiala.png) no-repeat!important; background-size: 100%
100%!important; padding:30px 0; } /deep/ .el-menu--horizontal.amenu .el-menu{
background: transparent!important; } /deep/ .el-menu--horizontal.amenu .el-menu
li{ background: transparent!important; text-align: center; } /*菜单样式结束*/ </style>