前端模拟目录左侧

最新推荐文章于 2024-07-24 11:09:48 发布

是要开心的婷婷呀~

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量336

点赞数

文章标签： html5 javascript vue.js

本文链接：https://blog.csdn.net/weixin_48837605/article/details/129338107

版权

1.实现效果

2.public中menuData.json文件

[{
	"key": "10000002",
	"menuType": "01",
	"menuLevel": 1,
	"menuName": "危化品信息管理",
	"menuPath": "",
	"children": [{
		"key": "10000002-1",
		"parent": "10000002",
		"menuType": "01",
		"menuLevel": 2,
		"menuName": "合规信息管理",
		"menuPath": "",
		"children": [{
				"key": "10000002-1-1",
				"parent": "10000002-1",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "合规信息维护",
				"menuPath": "10000001-1-1",
				"menuUrl": "/compliance/maintain/index",
				"title": "合规信息维护"
			},
			{
				"key": "10000002-1-2",
				"parent": "10000002-1",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "合规信息审核",
				"menuPath": "10000002-1-2",
				"menuUrl": "/stipulateAudit/audit/index",
				"title": "合规信息审核"
			},
			{
				"key": "10000002-1-3",
				"parent": "10000002-1",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "合规信息变更审核",
				"menuPath": "10000002-1-3",
				"menuUrl": "/stipulateChangeAudit/changeAudit/index",
				"title": "合规信息变更审核"
			},
			{
				"key": "10000002-1-4",
				"parent": "10000002-1",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "合规信息查询",
				"menuPath": "10000002-1-4",
				"menuUrl": "/stipulateSearch/search/index",
				"title": "合规信息查询"
			},
			{
				"key": "10000002-1-5",
				"parent": "10000002-1",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "合规信息变更",
				"menuPath": "10000002-1-5",
				"menuUrl": "/compliance/change/index",
				"title": "合规信息变更"
			},
			{
				"key": "10000002-1-6",
				"parent": "10000002-1",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "合规信息变更查询",
				"menuPath": "10000002-1-6",
				"menuUrl": "/stipulateChangeSearch/changeSearch/index",
				"title": "合规信息变更审核"
			}
		]
	},
	{
		"key": "10000002-2",
		"parent": "10000002",
		"menuType": "01",
		"menuLevel": 2,
		"menuName": "危害信息管理",
		"menuPath": "",
		"children": [{
				"key": "10000002-2-1",
				"parent": "10000002-2",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "危害信息审核",
				"menuPath": "10000002-2-1",
				"menuUrl": "/hazardInfo/approval/index",
				"title": "危害信息审核"
			},
			{
				"key": "10000002-2-2",
				"parent": "10000002-2",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "危害信息变更审核",
				"menuPath": "10000002-1-2",
				"menuUrl": "/hazardInfoChange/approval/index",
				"title": "危害信息变更审核"
			},
			{
				"key": "10000002-2-3",
				"parent": "10000002-2",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "危害信息查询",
				"menuPath": "10000002-2-3",
				"menuUrl": "/hazardInfo/search/index",
				"title": "危害信息查询"
			}]
	},
	{
		"key": "10000002-3",
		"parent": "10000002",
		"menuType": "01",
		"menuLevel": 2,
		"menuName": "物流信息跟踪",
		"menuPath": "",
		"children": [{
			"key": "10000002-3-1",
			"parent": "10000002-3",
			"menuType": "01",
			"menuLevel": 3,
			"menuName": "物流信息跟踪大屏显示",
			"menuPath": "10000002-3-1",
			"menuUrl": "#",
			"title": "物流信息跟踪大屏显示"
		}]
	}]
},{
	"key": "10000001",
	"menuType": "01",
	"menuLevel": 1,
	"menuName": "配置管理",
	"menuPath": "",
	"children": [
		{
		"key": "10000001-1",
		"parent": "10000001",
		"menuType": "01",
		"menuLevel": 2,
		"menuName": "危化品审核配置",
		"menuPath": "",
		"children": [{
				"key": "10000001-1-1",
				"parent": "10000001-1",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "合规信息审核配置",
				"menuPath": "10000001-1-1",
				"menuUrl": "/stipulateConfig/config/index",
				"title": "合规信息审核配置"
			},
			{
				"key": "10000001-1-2",
				"parent": "10000001-1",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "危害信息审核配置",
				"menuPath": "10000001-1-2",
				"menuUrl": "/hazardInfoConfig/index",
				"title": "危害信息审核配置"
			},
			{
				"key": "10000001-1-3",
				"parent": "10000001-1",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "合规信息消息配置",
				"menuPath": "10000001-1-3",
				"menuUrl": "/complianceMessageConfig/index",
				"title": "合规信息消息配置"
			}
		]
	},{
		"key": "10000001-2",
		"parent": "10000001",
		"menuType": "01",
		"menuLevel": 2,
		"menuName": "危化品字段配置",
		"menuPath": "",
		"children": [{
				"key": "10000001-2-1",
				"parent": "10000001-2",
				"menuType": "01",
				"menuLevel": 3,
				"menuName": "危害信息分类配置",
				"menuPath": "10000001-2-1",
				"menuUrl": "/hazardFieldConfig/classify/index",
				"title": "危害信息分类配置"
			}
		]
	}]
}]

3.在store中使用并在main.js中引入store