element ui 菜单右侧展开_elementui左侧多级菜单右侧内容区

菜单预览.png

1、AsideBar

class="el-menu-vertical-demo"

router

:default-active="activeMenu"

background-color="#263238"

text-color="#8a979e"

active-text-color="#fff">

v-for="router in routers"

:router="router"

:key="router.path"

>

import { mapGetters } from 'vuex'

import asideBarItem from './asideBarItem'

export default {

name: 'asideBar',

components: {

asideBarItem

},

data () {

return {

}

},

computed: {

routers () {

console.log(this.$store.state.permission.routers)

return this.$store.state.permission.routers

},

...mapGetters([

'permission_routes'

]),

activeMenu () {

const route = this.$route

const {meta, path} = route

// if set path, the sidebar will highlight the path you set

if (meta.activeMenu) {

return meta.activeMenu

}

return path

}

}

}

.aside-container {

height: inherit;

}

2、asideBarItem

:index="router.path"

v-if="router.hasOwnProperty('children')" >

{{router.name}}

v-for="child in router.children" :key="child.path"

:router="child"

>

v-else

:key="router.path"

:index="router.path">

{{router.name}}

// hasOwnProperty可以用来检测一个对象是否含有特定的自身属性

export default {

name: 'asideBarItem',

components: {},

props: {

router: {

type: Object

}

},

data () {

return {

iconArr:['img9', 'img8', 'img10']

}

},

computed: {

// router () {

// return this.$router.options.routes

// }

},

watch: {},

methods: {},

created () {

},

mounted () {

}

}

.asideBarItem-container {

.el-submenu__title{

font-size: 16px!important;

}

}

3、home.vue

退出登录

{{item.name}}

import asideBar from '@/components/AsideBar'

import appMain from '@/components/AppMain'

export default {

name: 'index',

components: {

asideBar,

appMain

},

data () {

return {

levelList: null,

tagsList:[]

}

},

computed: {

},

watch: {

$route () {

this.getBreadcrumb()

}

},

methods: {

getBreadcrumb () {

// $route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录

let matched = this.$route.matched.filter(item => item.name)

this.levelList = matched

},

loginOut (){

sessionStorage.removeItem('token');

this.$router.push('/login')

}

},

created () {

this.getBreadcrumb()

},

mounted () {

}

}

body > .el-container {

margin-bottom: 40px;

}

#index-container {

height: 100%;

.el-header, .el-footer {

background-color: #B3C0D1;

color: #333;

text-align: center;

line-height: 60px;

}

.el-aside {

background-color: #263238;

color: #333;

text-align: left;

line-height: 200px;

}

.el-main {

background-color: #fff;

color: #333;

height: 100%;

min-height: 885px;

padding: 0 20px 20px 20px;

}

.el-dropdown-link img{

}

}