element-ui左侧导航栏效果图
image.png
安装
npm install element-ui -S
在main.js⾥引⼊
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Home.vue
<template>
<div class="home">
<div class="manage_page fillcontain">
<el-row >
<el-col :span="3" >
<el-menu
router
:default-active="$route.name"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#324157"
text-color="#bfcbd9"
active-text-color="#049eff">
active-text-color="#049eff">
<el-menu-item index="home"><i class="el-icon-menu"></i>⾸页</el-menu-item>            <el-submenu index="2">
<template slot="title"><i class="el-icon-document"></i>数据管理</template>
<el-menu-item index="list">⽤户列表1</el-menu-item>
<el-menu-item index="list2">⽤户列表2</el-menu-item>
<el-menu-item index="list3">⽤户列表3</el-menu-item>
<el-menu-item index="list4">⽤户列表4</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-document"></i>编辑</template>
<el-menu-item index="index">编辑1</el-menu-item>
<el-menu-item index="index2">编辑2</el-menu-item>
<el-menu-item index="index3">编辑3</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
<el-col :span="21">
<keep-alive>
<router-view></router-view>
</keep-alive>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
computed: {
/*defaultActive: function () {
/!*刷新后导航还是⾼亮显⽰且展开*!/ //或者直接$route.name
//console.log(this.$route.path) /home/list  只取list就⾏和el-menu-item的index对应      return this.$place('/home/', '');
}*/
},
vue element admindata() {
return {}
},
mounted() {},
methods: {
handleOpen(key, keyPath) {
},
handleClose(key, keyPath) {
},
}
}
</script>
<style lang="less" scoped>
.home, .fillcontain {
height: 100%;
}
.el-menu {
border: 0;
}
.el-col {
background-color: #EFF2F7;
height: 100%;
overflow: auto;
}
.home {
/deep/ .el-submenu .el-menu-item {
background-color: #1f2d3d !important;
}
/deep/ .el-submenu__title:hover, .el-submenu .el-menu-item:hover {
background-color: #48576a !important;
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。