Vue中Json树结构递归遍历

JSON树结构遍历

• Json树形字串示例
• js中递归遍历取出deportment、id
• • json对象封装
  • json对象push数组
• 结果展示

Json树形字串示例

[{
	"id": 1,
	"name": "股东会",
	"parentId": -1,
	"depPath": ".1",
	"enabled": true,
	"isParent": true,
	"children": [{
		"id": 2,
		"name": "董事会",
		"parentId": 1,
		"depPath": ".1.2",
		"enabled": true,
		"isParent": true,
		"children": [{
			"id": 3,
			"name": "总经办",
			"parentId": 2,
			"depPath": ".1.2.3",
			"enabled": true,
			"isParent": true,
			"children": [{
					"id": 4,
					"name": "财务部",
					"parentId": 3,
					"depPath": ".1.2.3.4",
					"enabled": true,
					"isParent": false,
					"children": [],
					"result": null
				},
				{
					"id": 5,
					"name": "销售部",
					"parentId": 3,
					"depPath": ".1.2.3.5",
					"enabled": true,
					"isParent": true,
					"children": [{
							"id": 6,
							"name": "销售一部",
							"parentId": 5,
							"depPath": "1.2.3.5.6",
							"enabled": true,
							"isParent": false,
							"children": [],
							"result": null
						},
						{
							"id": 7,
							"name": "销售二部",
							"parentId": 5,
							"depPath": "1.2.3.5.7",
							"enabled": true,
							"isParent": false,
							"children": [],
							"result": null
						},
						{
							"id": 9,
							"name": "销售三部",
							"parentId": 5,
							"depPath": ".1.2.3.5.9",
							"enabled": true,
							"isParent": false,
							"children": [],
							"result": null
						}
					],
					"result": null
				},
				{
					"id": 12,
					"name": "制造部",
					"parentId": 3,
					"depPath": ".1.2.3.12",
					"enabled": true,
					"isParent": false,
					"children": [],
					"result": null
				},
				{
					"id": 13,
					"name": "IT部",
					"parentId": 3,
					"depPath": ".1.2.3.13",
					"enabled": true,
					"isParent": false,
					"children": [],
					"result": null
				},
				{
					"id": 149,
					"name": "采购部",
					"parentId": 3,
					"depPath": ".1.2.3.149",
					"enabled": true,
					"isParent": false,
					"children": [],
					"result": null
				}
			],
			"result": null
		}],
		"result": null
	}],
	"result": null
}]

js中递归遍历取出deportment、id

 //遍历树形结构 json的递归写法
          traverseTree(node) {
              for (let i=0;i<node.length;i++){
                let element = node[i];
                let depot = {};
                depot.id = element.id;
                depot.name = element.name;
                this.departmentsList.push(depot);
                let children = element.children;
                this.traverseTree(children);
              }
          },

json对象封装

                let depot = {};
                depot.id = element.id;
                depot.name = element.name;

json对象push数组

                this.departmentsList.push(depot);

结果展示