前端递归循环部门树,根据pid找下级,无限遍历。

今天遇到一个奇葩事请,需要获取部门树,按道理因该是后端直接返回一个树状直接给我的,但是他只返回一个Array数组,让我根据pid找下级,自己组一个树状的,来就来,谁怕谁,直接上代码:

这是后端返回的数据格式:

 [
   	{id: 1, organizationId: 1, name: "有限公司", pid: 0}
	{id: 2, organizationId: 1, name: "键管部",  pid: 1}
	{id: 3, organizationId: 1, name: "技术部", pid: 1,}
	{id: 15, organizationId: 1, name: "技术一部", pid: 3}
	{id: 16, organizationId: 1, name: "技术一部一组", pid: 15}
 ]

这是js代码:

mounted(){
	axios.get('xxxx').then(res => {   //这里模仿请求接口数据
	    let data = res.data;
	    //这里的pid就是你的部门顶级id,一般都是null,0
		let newArr = this.filterArray(data, pid)
	})
},

methods:{
	filterArray(data, pid) {
	   let tree = [];
	   let temp;
	   for (let i = 0; i < data.length; i++) {
	     if (data[i].pid == pid) {
	       let obj = data[i];
	       temp = this.filterArray(data, data[i].id);
	       obj.total = temp.length;
	       obj.label = data[i].name;
	       if (temp.length > 0) {
	         obj.children = temp;
	       }
	       tree.push(obj);
	     }
	   }
	   return tree;
	 },
}

处理完了打印一下看看看,我们想要的数据格式就出来了。

猜你喜欢

转载自blog.csdn.net/m0_46156566/article/details/107187614