<template>
<div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
default-active="1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="rgb(31 45 61)"
text-color="#fff"
active-text-color="#ffd04b">
<template v-for="item in menus">
<app-link v-if="item.children.length<1" :to="item.path">
<el-menu-item :index="item.id">
<i :class="item.icon"></i>
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</app-link>
<el-submenu v-else :index="item.id">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{ item.name }}</span>
</template>
<template v-for="sub in item.children">
<app-link v-if="sub.children.length<1" :to="sub.path">
<el-menu-item :index="sub.id">{{ sub.name }}</el-menu-item>
</app-link>
<el-submenu v-else :index="sub.id">
<template slot="title">{{ sub.name }}</template>
<app-link :to="three.path" v-for="three in sub.children" :index="three.id" >
<el-menu-item >{{ three.name }}</el-menu-item>
</app-link>
</el-submenu>
</template>
</el-submenu>
</template>
</el-menu>
</el-scrollbar>
</div>
</template>//js部分,applink组件可以直接用el-link代替，只是一个封装
import { mapGetters } from 'vuex'
import Logo from './Logo'
import variables from '@/styles/variables.scss'
import AppLink from './Link'
export default {
components: { Logo,AppLink },
data() {
return {
menus:[
{
id:'1',
name:'一级菜单',
icon:'el-icon-location',
path:'/',
children:[
{
id:'2',
name:'二级菜单',
icon:'el-icon-setting',
path:'/',
children:[
{
id:'3',
name:'三级菜单',
icon:'el-icon-setting',
path:'/404',
}
]
},
{
id:'4',
name:'二级菜单2',
icon:'el-icon-setting',
path:'/nested/menu1/menu1-1/index',
children:[
]
},
]
},
{
id:'5',
name:'一级菜单2',
icon:'el-icon-location',
path:'/',
children:[
{
id:'6',
name:'二级菜单',
icon:'el-icon-setting',
path:'/',
children:[
]
}
]
},
{
id:'7',
name:'一级菜单3',
icon:'el-icon-location',
path:'/table/index',
children:[
]
},
]
}
},
computed: {
...mapGetters([
'sidebar'
]),
routes() {
console.log('r',this.$router.options.routes)
return this.$router.options.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
},
showLogo() {
return this.$store.state.settings.sidebarLogo
},
variables() {
return variables
},
isCollapse() {
return !this.sidebar.opened
}
},
methods:{
handleOpen(key, keyPath) {
//console.log(key, keyPath);
},
handleClose(key, keyPath) {
//console.log(key, keyPath);
}
}
}
</script>效果：
可以只看menu菜单部分