vue element 动态 多级导航菜单

 

vue的递归组件:




引用:



          






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": []
	}]
}]

 

 

 

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

vue element 动态 多级导航菜单_第1张图片

你可能感兴趣的:(vue element 动态 多级导航菜单)