vue element 动态 多级导航菜单

 

vue的递归组件：

<template>
    <div>
      <!-- 根据实际情况做修改 -->

  <el-submenu  v-for="(item,index) in navlist" :key="index"   v-if="item.adminMenu.menuType=='list'" :index="item.adminMenu.code">
        <template slot="title">
          <i  class="el-icon-location"></i>
         <span>{{item.adminMenu.code}}</span>
        </template>
                <NavMenu  :navlist="item.children"></NavMenu>
      </el-submenu>
  
                <el-menu-item  v-for="(item,index) in navlist" :key="index" v-if="item.adminMenu.menuType=='page'"  :index="item.adminMenu.url">          <i  class="el-icon-location"></i>
<span>{{item.adminMenu.code}}</span></el-menu-item>


     
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  props: ["navlist"],
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang='scss' >
//如果没有此样式的话  折叠有子级菜单的父菜单文字是不会隐藏的
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu .el-submenu__title span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
// .el-menu{
//   width: 200px;
//    .el-submenu__icon-arrow{
//     opacity: 1;
//   }
// }
// .el-menu--collapse{
//   width: 60px!important;
//   .el-submenu__icon-arrow{
//     opacity: 0;
//   }
// }


</style>

引用：

<el-menu style="text-align:left" default-active="2" class="el-menu-vertical-demo"  :collapse-transition="true" :collapse="isCollapse"  background-color="#222D32" text-color="#fff" :unique-opened="true" router active-text-color="#ffd04b">

          <NavMenu :navlist="navlist"></NavMenu>
</el-menu>





import NavMenu from "./NavMenu";

  components: {
    NavMenu
  },

我的数据列表如下

[{
	"adminMenu": {
		"id": 70,
		"menuName": "客户管理",
		"menuType": "page",
		"pid": "0",
		"url": "/customer",
		"icon": null,
		"sort": 1,
		"deep": 1,
		"code": "customer.user.view",
		"resource": "customer.user.view"
	},
	"children": []
}, {
	"adminMenu": {
		"id": 99,
		"menuName": "统计报表",
		"menuType": "list",
		"pid": "0",
		"url": "#",
		"icon": null,
		"sort": 7,
		"deep": 1,
		"code": "statistics",
		"resource": "statistics"
	},
	"children": [{
		"adminMenu": {
			"id": 109,
			"menuName": "产品运营总览中心",
			"menuType": "page",
			"pid": "99",
			"url": "/statistics/core",
			"icon": null,
			"sort": 1,
			"deep": 2,
			"code": "statistics.core",
			"resource": "statistics.core"
		},
		"children": []
	}, {
		"adminMenu": {
			"id": 123,
			"menuName": "运营报表",
			"menuType": "list",
			"pid": "99",
			"url": "#",
			"icon": null,
			"sort": 2,
			"deep": 2,
			"code": "statistics.yyyw",
			"resource": "statistics.yyyw"
		},
		"children": [{
			"adminMenu": {
				"id": 124,
				"menuName": "运营业务报表",
				"menuType": "page",
				"pid": "123",
				"url": "/tjbb/Operaional",
				"icon": null,
				"sort": 5,
				"deep": 3,
				"code": "statistics.yunying",
				"resource": "statistics.yunying"
			},
			"children": []
		}]
	}, {
		"adminMenu": {
			"id": 115,
			"menuName": "贷后管理报表",
			"menuType": "list",
			"pid": "99",
			"url": "#",
			"icon": null,
			"sort": 3,
			"deep": 2,
			"code": "poi",
			"resource": "poi"
		},
		"children": [{
			"adminMenu": {
				"id": 116,
				"menuName": "风险总览样表",
				"menuType": "page",
				"pid": "115",
				"url": "/tjbb/riskbb",
				"icon": null,
				"sort": 1,
				"deep": 3,
				"code": "statistics.risk",
				"resource": "statistics.risk"
			},
			"children": []
		}, {
			"adminMenu": {
				"id": 117,
				"menuName": "催收报表",
				"menuType": "page",
				"pid": "115",
				"url": "/tjbb/csbb",
				"icon": null,
				"sort": 2,
				"deep": 3,
				"code": "statistics.dun",
				"resource": "statistics.dun"
			},
			"children": []
		}, {
			"adminMenu": {
				"id": 118,
				"menuName": "首贷续贷入催率和回收率",
				"menuType": "page",
				"pid": "115",
				"url": "/tjbb/jinandchu",
				"icon": null,
				"sort": 4,
				"deep": 3,
				"code": "statistics.poi",
				"resource": "statistics.poi"
			},
			"children": []
		}, {
			"adminMenu": {
				"id": 119,
				"menuName": "7日内提前还款报表",
				"menuType": "page",
				"pid": "115",
				"url": "/tjbb/day7",
				"icon": null,
				"sort": 5,
				"deep": 3,
				"code": "statistics.poi.seven",
				"resource": "statistics.poi.seven"
			},
			"children": []
		}]
	}, {
		"adminMenu": {
			"id": 110,
			"menuName": "第三方统计",
			"menuType": "list",
			"pid": "99",
			"url": "#",
			"icon": null,
			"sort": 4,
			"deep": 2,
			"code": "statistics.third",
			"resource": "statistics.third"
		},
		"children": [{
			"adminMenu": {
				"id": 111,
				"menuName": "Advance AI",
				"menuType": "page",
				"pid": "110",
				"url": "/statistics/third",
				"icon": null,
				"sort": 1,
				"deep": 3,
				"code": "statistics.third.advanceai",
				"resource": "statistics.third.advanceai"
			},
			"children": []
		}]
	}, {
		"adminMenu": {
			"id": 100,
			"menuName": "渠道数据",
			"menuType": "page",
			"pid": "99",
			"url": "/statistics/channel",
			"icon": null,
			"sort": 5,
			"deep": 2,
			"code": "statistics.channel",
			"resource": "statistics.channel"
		},
		"children": []
	}]
}]

 

 

 

效果如下  我做了国际化 具体操作上面没写 样子大致是这样