<template>
|
<div class="myMenu">
|
<el-menu :default-active="id" class="el-menu-vertical-demo">
|
<el-submenu @click="select(oneMenu)" :index="oneMenu.id" v-for="(oneMenu,i) in menus" :key="i">
|
<template slot="title">
|
<i v-if="oneMenu.icon" :class="oneMenu.icon" class="ico"></i>
|
<span>{{ oneMenu.name }}</span>
|
</template>
|
<el-menu-item-group v-if="oneMenu.subMenus">
|
<el-menu-item @click="select(twoMenu,oneMenu)" :index="twoMenu.id" v-for="(twoMenu,j) in oneMenu.subMenus" :key="j">{{ twoMenu.name }}</el-menu-item>
|
</el-menu-item-group>
|
</el-submenu>
|
</el-menu>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
acTabs: 'workList',
|
menus: [{
|
id: '1',
|
name: '告警工单',
|
url: 'alarmWork',
|
icon: 'el-icon-s-order',
|
subMenus: [
|
{
|
id: '1-1',
|
url: 'addWork',
|
name: '新建工单',
|
}, {
|
id: '1-2',
|
url: 'pending',
|
name: '待处理',
|
}, {
|
id: '1-3',
|
url: 'processed',
|
name: '已处理',
|
},
|
]
|
},],
|
id: '1-2'
|
}
|
},
|
methods: {
|
select(data, parent) {
|
console.log(this.$router)
|
this.id = data.id;
|
if (data.url) {
|
this.$router.push({
|
path: `/${parent.url}/${data.url}`,
|
}).catch(err => {
|
console.log(err)
|
});
|
}
|
},
|
},
|
mounted() {
|
},
|
}
|
</script>
|
|
<style scoped>
|
.myMenu {
|
width: 100%;
|
}
|
|
.myMenu .el-submenu,
|
.myMenu /deep/ .el-submenu {
|
margin-bottom: 20px;
|
}
|
|
.myMenu .el-menu,
|
.myMenu /deep/ .el-menu {
|
background: transparent;
|
border-right: none;
|
}
|
|
.myMenu .el-submenu__title,
|
.myMenu /deep/ .el-submenu__title,
|
.myMenu .el-submenu__title i,
|
.myMenu /deep/ .el-submenu__title i {
|
color: #ffffff;
|
}
|
|
.myMenu .el-submenu .el-submenu__title,
|
.myMenu /deep/ .el-submenu .el-submenu__title {
|
font-size: 24px;
|
}
|
|
.myMenu .el-submenu .el-submenu__title .ico,
|
.myMenu /deep/ .el-submenu .el-submenu__title .ico {
|
width: 26px;
|
height: 26px;
|
background: #ffffff;
|
border-radius: 50%;
|
color: #2b2a3a;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 18px;
|
font-size: 18px;
|
}
|
|
.myMenu .el-submenu__icon-arrow,
|
.myMenu /deep/ .el-submenu__icon-arrow {
|
font-size: 18px;
|
}
|
|
.myMenu .el-submenu .el-submenu__title,
|
.myMenu /deep/ .el-submenu .el-submenu__title {
|
display: flex;
|
align-items: center;
|
}
|
|
.myMenu .el-submenu.is-opened .el-submenu__title,
|
.myMenu /deep/ .el-submenu.is-opened .el-submenu__title {
|
border-bottom-color: transparent;
|
background: #2b2a3a;
|
}
|
|
.myMenu .el-submenu__title:hover,
|
.myMenu /deep/ .el-submenu__title:hover {
|
background: transparent;
|
}
|
|
.myMenu .el-submenu .el-menu-item,
|
.myMenu /deep/ .el-submenu .el-menu-item {
|
height: 36px;
|
line-height: 36px;
|
color: #ababab;
|
margin: 9px 0;
|
}
|
|
.myMenu .el-submenu .el-menu-item:focus,
|
.myMenu /deep/ .el-submenu .el-menu-item:focus,
|
.myMenu .el-submenu .el-menu-item:hover,
|
.myMenu /deep/ .el-submenu .el-menu-item:hover {
|
background-color: transparent;
|
color: #ffffff;
|
}
|
|
.myMenu .el-submenu .el-menu-item.is-active,
|
.myMenu /deep/ .el-submenu .el-menu-item.is-active {
|
background: #3e81ea;
|
color: #ffffff;
|
}
|
</style>
|
