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> 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>