vue menu菜单动态获取数据
template部分<el-menudefault-active="PageHome"//默认打开的页面pathclass="el-menu-demo"//添加class便于设置样式mode="horizontal"//设置菜单为水平菜单默认值为verticalmenu-trigger="click"...
·
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>
更多推荐
已为社区贡献4条内容
所有评论(0)