1、EMenu.vue菜单组件
<template>
<el-menu :default-active="defaultActive"
class="el-menu-vertical-demo"
unique-opened
router>
<template v-for="(item, ind) in menu">
<el-submenu v-if="item && item.childList.length>0"
:index="`${item.id}`"
:key="ind">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item-group v-for="(itm, i) in item.childList"
:key="i">
<el-menu-item :index="`/${item.icon}${itm.route}`">{{itm.name}}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item v-else
:index="`${item.route}`"
:key="ind">
<i class="el-icon-menu"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</template>
</el-menu>
</template>
<script>
export default {
data () {
return {
defaultActive: '',
menu: [......]
}
}
}
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
min-height: 400px;
height: 100%;
}
</style>
2、父组件调用
<el-aside width="200px">
<EMenu></EMenu>
</el-aside>
.....
import EMenu from '@/components/EMenu.vue'
export default {
components: { EMenu },
data () {
return {
}
}
}