因为element ui 的模板不支持多级渲染菜单，需要我们自己去重构：
那就开始吧：我的这个需要通过路由传参，所以做了点修改：
1. 新建一个组件 test.vue：上代码：
<template>
<div class="navMenu">
<label v-for="navMenu in navMenus" :key="navMenu.entity.Id">
<!-- <i class="el-icon-location"></i> -->
<div v-if="navMenu.childs==null&&navMenu.entity" :key="navMenu.entity.Id" :data="navMenu" > //判断是否有子路由，
<el-menu-item >
<router-link :to="{path:navMenu.entity.url,query:{ID:navMenu.entity.Id}}"> //不需要组件提供的路由模式，用路由传参传入对应参数
<span class="item_title">{{navMenu.entity.label}}</span> //菜单名称
</router-link>
</el-menu-item>
</div>
<el-submenu v-if="navMenu.childs&&navMenu.entity"
:key="navMenu.entity.Id" :data="navMenu" :index="navMenu.entity.Id" > //判断是否有子路由，
<template slot="title">
<i class="el-icon-location"></i> //图标显示，可根据返回的路径动态渲染
<span class="item_title"> {{navMenu.entity.label}}</span> //菜单名称
</template>
<NavMenu :navMenus="navMenu.childs"></NavMenu> //重新调用组件，迭代
</el-submenu>
</label>
</div>
</template>
<script>
export default {
name: 'NavMenu',
props: ['navMenus'],
data() {
return {}
},
mounted(){
console.log(this.navMenus)
},
methods: {}
}
</script>
<style scoped>
.navMenu{
width: 100%;
height: 100%;
background: #00142a !important;
}
.item_title{
color:#fff ;
background-color: #00142a !important
}
</style>
<style>
.el-submenu .el-submenu__title{
background-color: #00142a !important;
color:#eee !important;
text-align: left !important;
}
.el-submenu .el-menu-item{
color:#eee !important;
background-color: #00142a !important;
}
</style>
2 . 在外部页面引用：
<div class="forSideHeight" style="overflow-y: scroll;">
<el-menu
default-active="2"
style="padding-bottom: 90px;"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
router
background-color="rgba(0, 21, 41, 1)"
text-color="#fff"
active-text-color="#ffd04b"
active-background-color="#ffd04b">
<NavMenu :navMenus="leftMenus.childs"></NavMenu>
</el-menu>
</div>
3.这里所用到的数据格式，最好让后端配合：
{
"entity": null,
"childs": [{
"entity": {
"Id": '42',
'PicName': '#',
"PicUrl": '#',
"label": "交易管理",
"num": "1",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '43',
'PicName': '#',
"PicUrl": '#',
"label": "交易明细",
"num": null,
"remark": null,
"url": "/homedetail"
},
"childs": null
}, ]
},
{
"entity": {
"Id": '44',
'PicName': '#',
"PicUrl": '#',
"label": "商户管理",
"num": "2",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '45',
'PicName': '#',
"PicUrl": '#',
"label": "商户信息（直营）",
"num": null,
"remark": null,
"url": "/storelist"
},
"childs": null
},
{
"entity": {
"Id": '46',
'PicName': '#',
"PicUrl": '#',
"label": "商户信息（所有）",
"num": null,
"remark": null,
"url": "/storelist2"
},
"childs": null
},
]
},
{
"entity": {
"Id": '47',
'PicName': '#',
"PicUrl": '#',
"label": "代理商管理",
"num": "3",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '48',
'PicName': '#',
"PicUrl": '#',
"label": "代理商列表",
"num": null,
"remark": null,
"url": "/agentpage"
},
"childs": null
},
{
"entity": {
"Id": '49',
'PicName': '#',
"PicUrl": '#',
"label": "提现审批",
"num": null,
"remark": null,
"url": "/approval"
},
"childs": null
},
]
},
{
"entity": {
"Id": '50',
'PicName': '#',
"PicUrl": '#',
"label": "市场管理",
"num": "4",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '51',
'PicName': '#',
"PicUrl": '#',
"label": "业务员管理（直营）",
"num": null,
"remark": null,
"url": "/salesman"
},
"childs": null
},
{
"entity": {
"Id": '52',
'PicName': '#',
"PicUrl": '#',
"label": "业务员管理（所有）",
"num": null,
"remark": null,
"url": "/salesman2"
},
"childs": null
},
]
},
{
"entity": {
"Id": '53',
'PicName': '#',
"PicUrl": '#',
"label": "二维码管理",
"num": "5",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '54',
'PicName': '#',
"PicUrl": '#',
"label": "添加二维码",
"num": null,
"remark": null,
"url": "/addqrcode"
},
"childs": null
},
{
"entity": {
"Id": '55',
'PicName': '#',
"PicUrl": '#',
"label": "直营二维码",
"num": null,
"remark": null,
"url": "/qrcodelist"
},
"childs": null
},
{
"entity": {
"Id": '56',
'PicName': '#',
"PicUrl": '#',
"label": "所有二维码",
"num": null,
"remark": null,
"url": "/qrcodelist2"
},
"childs": null
},
]
},
{
"entity": {
"Id": '57',
'PicName': '#',
"PicUrl": '#',
"label": "设备码管理",
"num": "6",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '58',
'PicName': '#',
"PicUrl": '#',
"label": "添加设备码",
"num": null,
"remark": null,
"url": "/adddevice"
},
"childs": null
},
{
"entity": {
"Id": '59',
'PicName': '#',
"PicUrl": '#',
"label": "直营设备码",
"num": null,
"remark": null,
"url": "/devicecodelist"
},
"childs": null
},
{
"entity": {
"Id": '60',
'PicName': '#',
"PicUrl": '#',
"label": "所有设备码",
"num": null,
"remark": null,
"url": "/devicecodelist2"
},
"childs": null
},
]
},
{
"entity": {
"Id": '61',
'PicName': '#',
"PicUrl": '#',
"label": "权限管理",
"num": "7",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '62',
'PicName': '#',
"PicUrl": '#',
"label": "账号管理",
"num": null,
"remark": null,
"url": "/usersupervise"
},
"childs": null
},
{
"entity": {
"Id": '63',
'PicName': '#',
"PicUrl": '#',
"label": "权限管理",
"num": "7",
"remark": null,
"url": "/jurisdiction"
},
"childs": null
},
]
},
{
"entity": {
"Id": '64',
'PicName': '#',
"PicUrl": '#',
"label": "系统参数管理",
"num": "8",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '65',
'PicName': '#',
"PicUrl": '#',
"label": "系统参数",
"num": null,
"remark": null,
"url": "/system"
},
"childs": null
}]
},
{
"entity": {
"Id": '75',
'PicName': '#',
"PicUrl": '#',
"label": "菜单管理",
"num": "9",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '76',
'PicName': '#',
"PicUrl": '#',
"label": "菜单功能管理",
"num": null,
"remark": null,
"url": "/menu"
},
"childs": null
}]
},
{
"entity": {
"Id": '88',
'PicName': '#',
"PicUrl": '#',
"label": "测试",
"num": "10",
"remark": null,
"url": ""
},
"childs": [{
"entity": {
"Id": '89',
'PicName': '',
"PicUrl": '',
"label": "测试11",
"num": null,
"remark": '',
"url": "/ab"
},
"childs": [{
"entity": {
"Id": '90',
'PicName': '',
"PicUrl": '',
"label": "测dfgdfgdfg试22",
"num": null,
"remark": '',
"url": "/aps"
},
"childs": [
{
"entity": {
"Id": '91',
'PicName': '',
"PicUrl": '',
"label": "测dfgdgdfgdg试33",
"num": null,
"remark": '',
"url": "/ass"
},
"childs": [
{
"entity": {
"Id": '92',
'PicName': '',
"PicUrl": '',
"label": "测试3jodfguhiu33",
"num": null,
"remark": '',
"url": "/ass5"
},
"childs": null
}
]
}
]
}]
}]
},
]
}
