1、menu子组件
<template>
<div>
<template v-for="(item) in menuList">
<el-menu-item v-if="item.childList.length === 0"
:index="`${item.route}`"
:key="item.id">
<i class="el-icon-menu"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
<el-submenu v-if="item.childList.length > 0"
:key="item.id"
:index="`${item.id}`">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">{{item.name}}</span>
</template>
<el-menu-item v-for="i in item.childList"
:key="i.id"
:index="`/${item.icon}${i.route}`">
<span slot="title">{{i.name}}</span>
</el-menu-item>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
name: 'EMenu',
props: {
menuList: {
type: Array,
default: []
}
},
created () {
console.log(this.menuList)
}
}
</script>
<style>
</style>
2、父组件调用,这里激活了vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转
:router="true"
<el-aside width="200px">
<el-menu :default-active="activeRoute"
:unique-opened="true"
:router="true"
class="el-menu-vertical-demo">
<e-menu :menuList="menuList"></e-menu>
</el-menu>
</el-aside>
....
data(){
return{
activeRoute: ''
},
menuList: [...]
}
我这里因为后台返回参数不同,没有实现组件自己调用自己,如果是多级菜单的话,可以实现递归调用
3、menu子组件
<template>
<div>
<template v-for="(item) in menuList">
<el-menu-item v-if="item.childList.length === 0"
:index="`${item.route}`"
:key="item.id">
<i class="el-icon-menu"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
<el-submenu v-if="item.childList.length > 0"
:key="item.id"
:index="`${item.id}`">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">{{item.name}}</span>
</template>
<e-menu :menuList="item.childList"></e-menu>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
name: 'EMenu',
props: {
menuList: {
type: Array,
default: []
}
},
created () {
console.log(this.menuList)
}
}
</script>
<style>
</style>