<template>
<div class="log-left-container">
<!--<div class='log-container'>ABBOTT管理系统</div>-->
<el-scrollbar
class="default-scroll-bar"
>
<el-menu
default-active="1"
class="el-menu-vertical-demo"
:class="{collapseStyle: isCollapse, basicStyle: !isCollapse}"
@select="handleSelect"
:unique-opened="true"
@open="handleOpen"
@close="handleClose"
text-color="#bfcbd9"
active-text-color="#20a0ff"
background-color="#324157"
:collapse="isCollapse"
>
<el-menu-item index="1">
<template slot="title">
<i class="el-icon-location"></i><span>系统首页{{isCollapse?'':'ABBOTT'}}</span>
</template>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>个性定制
</template>
<el-menu-item index="2-1">
<i class="el-icon-document"></i>表格定制
</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-setting"></i>用户管理
</template>
<el-menu-item index="3-1">
<template slot="title">
<i class="el-icon-menu"></i>用户查询
</template>
</el-menu-item>
<el-menu-item index="3-2">
<template slot="title">
<i class="el-icon-menu"></i>用户增加
</template>
</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-menu"></i>测试展示
</template>
<el-menu-item index="4-1"><i class="el-icon-menu"></i>查询列表</el-menu-item>
<el-menu-item index="4-2"><i class="el-icon-menu"></i>增加数据</el-menu-item>
<el-menu-item index="4-3"><i class="el-icon-menu"></i>自我循环</el-menu-item>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-menu"></i>快捷操作
</template>
<el-menu-item index="5-1"><i class="el-icon-menu"></i>创建页面</el-menu-item>
<el-menu-item index="5-2"><i class="el-icon-menu"></i>拖拽功能</el-menu-item>
</el-submenu>
<el-submenu index="6">
<template slot="title">
<i class="el-icon-location"></i><span>技术分享</span>
</template>
<el-menu-item index="6-1">
<i class="el-icon-menu"></i><span>文章列表</span>
</el-menu-item>
</el-submenu>
<el-menu-item index="7">
<template slot="title">
<i class="el-icon-location"></i><span>租房信息</span>
</template>
</el-menu-item>
<el-menu-item index="8">
<template slot="title">
<i class="el-icon-menu"></i><span>精美图库</span>
</template>
</el-menu-item>
<el-menu-item index="9">
<template slot="title">
<i class="el-icon-location"></i><span>歌曲列表</span>
</template>
</el-menu-item>
<el-menu-item index="10">
<template slot="title">
<i class="el-icon-location"></i><span>文档</span>
</template>
</el-menu-item>
<el-menu-item index="11">
<template slot="title">
<i class="el-icon-location"></i><span>外链</span>
</template>
</el-menu-item>
<!--<el-menu-item index="8">-->
<!--<template slot="title">-->
<!--<i class="el-icon-location"></i><span>外链</span>-->
<!--</template>-->
<!--</el-menu-item>-->
<!--<el-menu-item index="8">-->
<!--<template slot="title">-->
<!--<i class="el-icon-location"></i><span>外链</span>-->
<!--</template>-->
<!--</el-menu-item>-->
<!--<el-menu-item index="8">-->
<!--<template slot="title">-->
<!--<i class="el-icon-location"></i><span>外链</span>-->
<!--</template>-->
<!--</el-menu-item>-->
<!--<el-menu-item index="8">-->
<!--<template slot="title">-->
<!--<i class="el-icon-location"></i><span>外链</span>-->
<!--</template>-->
<!--</el-menu-item>-->
</el-menu>
</el-scrollbar>
<!--</el-aside>-->
</div>
</template>
<script>
export default {
name: "adminMenu",
props: ['isCollapse'],
data () {
return {
// isCollapse: false
oneClass: 'bgB3D8FF'
}
},
methods: {
handleSelect(key, keyPath) {
switch(key){
case '1':
console.log('Page1 导航一')
this.$router.push('/index');
this.breadcrumbItems = ['导航一']
break;
case '2-1':
this.$router.push('/data_tmp')
this.breadcrumbItems = ['导航二']
break;
case '3-1':
this.$router.push('/user_list')
this.breadcrumbItems = ['用户查询']
break;
case '3-2':
this.$router.push('/user_add')
this.breadcrumbItems = ['用户增加']
break;
case '4-1':
this.$router.push('/studentList')
this.breadcrumbItems = ['导航三']
break;
case '4-2':
this.$router.push('/studentAdd')
this.breadcrumbItems = ['导航三']
break;
case '4-3':
this.$router.push('/studentGrid')
this.breadcrumbItems = ['导航三']
break;
case '5-1':
this.$router.push('/customContainer')
this.breadcrumbItems = ['导航三']
break;
case '5-2':
this.$router.push('/partDraggable')
this.breadcrumbItems = ['导航三']
break;
case '6-1':
this.$router.push('/article')
this.breadcrumbItems = ['导航三']
break;
case '7':
this.$router.push('/tenant_message')
this.breadcrumbItems = ['导航三']
break;
case '8':
this.$router.push('/gallery')
this.breadcrumbItems = ['导航三']
break;
case '9':
this.$router.push('/gallery')
this.breadcrumbItems = ['导航三']
break;
}
},
handleIconClick(ev) {
console.log(ev);
},
handleOpen(key, keyPath) {
// console.log(key, keyPath);
},
handleClose(key, keyPath) {
// console.log(key, keyPath);
}
}
}
</script>
<style scoped>
.el-menu-vertical-demo {
/*color: aqua;*/
/*background: #909399;*/
}
.bgB3D8FF {
background: #b3d8ff;
/*color: red*/
}
.bgF56C6C {
background: #F56C6C;
}
.index-span {
}
.span1 {
}
.basicStyle {
/*background: blue;*/
}
.collapseStyle {
/*color: #F56C6C;*/
/*width: 500px;*/
/*background: blue;*/
min-height:200px
}
</style>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
