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>