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

30 篇文章 5 订阅
4 篇文章 0 订阅
今天遇到一个奇葩事请,需要获取部门树,按道理因该是后端直接返回一个树状直接给我的,但是他只返回一个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;
	 },
}

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

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端攻城狮路飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值