<template>
|
<div class="AsideBar">
|
<!-- 二级侧边栏 -->
|
<el-aside width="200px" class="aside">
|
<el-scrollbar>
|
<el-menu class="el-menu-vertical" :default-active="$route.path"
|
|
>
|
<div v-for="item in asideList" :key="item.name">
|
<span class="AsideBarTitle">{{item.name}}</span>
|
<el-menu-item v-for="child in item.children" :key="child.name" :index="child.index" class="firstMenu"
|
@click="Jump(child.index)">
|
<span class="firstSpan">{{child.name}}</span>
|
</el-menu-item>
|
</div>
|
</el-menu>
|
</el-scrollbar>
|
</el-aside>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
menu: [
|
{
|
name: '/home/system', children: [
|
{
|
name: "基础设置", index: '/home/system/base', children: [
|
{
|
name: '用户管理', index: '/home/system/user',
|
},
|
{
|
name:'角色管理', index:'/home/system/role',
|
},
|
{
|
name:'权限管理',index:'/home/system/authority',
|
},
|
{
|
name:'部门管理',index:'/home/system/department',
|
}
|
]
|
},
|
{ name: "平台设置", index: "/home/system/plateform", children: [
|
{
|
name:'门户设置',index:'/home/system/portalSetting'
|
},
|
{
|
name:'第三方接口管理',index:'/home/system/otherInterface'
|
}
|
] },
|
],
|
}
|
],
|
asideList: null,
|
}
|
},
|
created() {
|
this.getAsideList(this.$route.path);
|
},
|
watch: {
|
$route(to, from) {
|
this.getAsideList(to.fullPath);
|
}
|
},
|
methods: {
|
getAsideList(path) {
|
let { menu } = this;
|
const that = this;
|
this.asideList = null;
|
menu.forEach(item => {
|
if (path.indexOf(item.name) !== -1) {
|
that.asideList = item.children;
|
}
|
})
|
},
|
Jump(path) {
|
this.$router.push(path);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scpoed>
|
.icon-padding {
|
padding-right: 10px;
|
}
|
|
.aside {
|
background: #eaedf1;
|
color: black;
|
text-align: center;
|
box-sizing: border-box;
|
position: relative;
|
// 固定标题
|
.siderbar-title {
|
position: fixed;
|
text-align: center;
|
margin: 0;
|
font-size: 26px;
|
width: 200px;
|
line-height: 66px;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
// box-shadow: 0 -5px 5px #0ff inset;
|
}
|
|
.el-scrollbar {
|
height: calc(100vh - 66px);
|
box-sizing: border-box;
|
|
.el-menu {
|
border: 0;
|
.AsideBarTitle {
|
display: block;
|
line-height: 60px;
|
color: #999;
|
font-weight: 650;
|
background-color: #f2f2f2;
|
border-bottom: 1px solid #e4e4e4;
|
}
|
|
.firstMenu {
|
background: #eaedf1;
|
text-align: center;
|
height: 40px;
|
line-height: 40px;
|
background-color: #eaedf1;
|
color: #666666;
|
border-bottom: 1px solid #e4e4e4;
|
|
&:hover .firstSpan {
|
color: #1a87fe;
|
}
|
|
.el-menu-item {
|
&:hover {
|
color: #22d3eb;
|
}
|
}
|
}
|
|
.is-active {
|
background-color: #fff;
|
color: #1a87fe;
|
}
|
}
|
|
.el-scrollbar__wrap {
|
overflow-x: hidden;
|
}
|
}
|
}
|
</style>
|
