vue数据处理:把数组处理成适用于tree组件的数据

例:

数据处理前:

[{"id":1,"pid":0,"name":"默认维度","type":"0"},
{"id":2,"pid":1,"name":"上海科技有限公司","type":"1"},
{"id":3,"pid":2,"name":"北京科技有限公司","type":"1"},
{"id":4,"pid":2,"name":"北京科技有限公司","type":"1"},
{"id":117,"pid":4,"name":"测试部门","type":"2"},
{"id":5,"pid":2,"name":"徐州科技有限公司","type":"1"},
{"id":6,"pid":2,"name":"重庆科技有限公司","type":"1"},
{"id":114,"pid":12,"name":"需求分析师","type":"3"},
{"id":7,"pid":2,"name":"人力资源部","type":"2"},
{"id":100,"pid":7,"name":"修改岗位测试3","type":"3"},
{"id":101,"pid":7,"name":"添加岗位测试","type":"3"},
{"id":102,"pid":7,"name":"添加岗位测试2","type":"3"},
{"id":103,"pid":8,"name":"java开发","type":"3"},
{"id":107,"pid":7,"name":"HR","type":"3"},
{"id":8,"pid":2,"name":"产品研发部","type":"2"},
{"id":10,"pid":8,"name":"统一岗位","type":"3"},
{"id":9,"pid":2,"name":"销售部","type":"2"},
{"id":108,"pid":9,"name":"销售顾问","type":"3"},
{"id":11,"pid":2,"name":"深圳科技有限公司","type":"1"},
{"id":12,"pid":2,"name":"咨询服务部","type":"2"},
{"id":106,"pid":12,"name":"咨询顾问","type":"3"}]

数据处理后:

[
	{"id":1,
	"pid":0,
	"name":"默认维度",
	"type":"0",
	"children":
		[
			{
				"id":2,
				"pid":1,
				"name":"上海科技有限公司",
				"type":"1",
				"children":
					[
						{
							"id":3,
							"pid":2,
							"name":"北京科技有限公司",
							"type":"1",
							"children":[]
						},
						{
							"id":4,
							"pid":2,
							"name":"北京科技有限公司",
							"type":"1",
							"children": [
								{"id":117,"pid":4,"name":"测试部门","type":"2","children":[]}]},
								{"id":5,"pid":2,"name":"徐州科技有限公司","type":"1","children":[]},
								{"id":6,"pid":2,"name":"重庆科技有限公司","type":"1","children":[]},
								{"id":7,"pid":2,"name":"人力资源部","type":"2","children":[{"id":100,"pid":7,"name":"修改岗位测试3","type":"3","children":[]},
								{"id":101,"pid":7,"name":"添加岗位测试","type":"3","children":[]},
								{"id":102,"pid":7,"name":"添加岗位测试2","type":"3","children":[]},
								{"id":107,"pid":7,"name":"HR","type":"3","children":[]}]},
								{"id":8,"pid":2,"name":"产品研发部","type":"2","children":[{"id":103,"pid":8,"name":"java开发","type":"3","children":[]},
								{"id":10,"pid":8,"name":"统一岗位","type":"3","children":[]}]},
								{"id":9,"pid":2,"name":"销售部","type":"2","children":[{"id":108,"pid":9,"name":"销售顾问","type":"3","children":[]}]},
								{"id":11,"pid":2,"name":"深圳科技有限公司","type":"1","children":[]},
								{"id":12,"pid":2,"name":"咨询服务部","type":"2","children":[{"id":114,"pid":12,"name":"需求分析师","type":"3","children":[]},
								{"id":106,"pid":12,"name":"咨询顾问","type":"3","children":[]}
							]
						}
					]
				}
			]
		}
	]

接下来进行数据处理:

1.将要处理的数据赋值给content变量,和声明处理后的数据的变量

let content = `${数据处理前的list}`
var newlist = []

2.给每条数据加上children属性

for (var a = 0; a < content.length; a++) {
  content[a].children = []
}

3.拿出最高层级的元素----pid数值最小则层级最高,此处直接取0,省去很多麻烦的数据操作

for (var b = 0; b < content.length; b++) {
   if (content[b].pid === 0) {
      newlist = content.splice(b, 1)
   }
}

4封装递归方法并执行

function deepSort (list, content) {
  var content1 = []
  for (var m = 0; m < list.length; m++) {
    for (var n = 0; n < content.length; n++) {
      if (list[m].id === content[n].pid) {
        list[m].children.push(content[n])
      } else {
        content1.push(content[n])
      }
    }
  }
  for (var o = 0; o < list.length; o++) {
    deepSort(list[o].children, content1)
  }
}

执行:

deepSort(newlist, content)

得到的newlist就是我们要的处理后的数据。
至此,完毕~

猜你喜欢

转载自blog.csdn.net/tuchang0212/article/details/87348734