专栏首页地方网络工作室的专栏JS数组递归——构建 element 级联选择器树形数据

JS数组递归——构建 element 级联选择器树形数据

JS数组递归——构建 element 级联选择器树形数据

通常,我们前端在开发管理后台的时候,会选择 vue+element 这样的技术栈去实现。但我们后端给的数据格式通常并不符合 element 的参数数据要求。比如,级联选择器 cascader 的参数数据格式如下:

[{
	"label": "第一级",
	"value": 2,
	"children": [{
		"label": "第二级",
		"value": 4,
		"children": [{
			"label": "第三级",
			"value": 13
		}, {
			"label": "测试3",
			"value": 14
		}]
	}]
}, {
	"label": "2",
	"value": 3,
	"children": [{
		"label": "4",
		"value": 5
	}]
}, {
	"label": "测试分类2",
	"value": 11,
	"children": [{
		"label": "测试分类0",
		"value": 12,
		"children": [{
			"label": "测试分类3",
			"value": 15
		}]
	}]
}]

而我们后端在输出接口的时候,是极少采用这种数据格式的。比如,一般叫 id|name|child 这样的字段名。

我们知道,cascader 是支持这样的别名参数设计的,因此我们使用时也没什么问题。

但是我今天遇到的一个状况是,后端直接给出了一个一维数组,换句话说,这位兄弟是直接查了一下数据表,把所有的数据通过一个数组直接给我返回了。而至于我怎么使用这个数据,他就不考虑了,因为他还有其他业务需要开发。

后端返回的数据格式如下:

[{
	"catid": 2,
	"parentId": 0,
	"catname": "第一级",
}, {
	"catid": 3,
	"parentId": 0,
	"catname": "2",
}, {
	"catid": 4,
	"parentId": 2,
	"catname": "第二级",
}, {
	"catid": 5,
	"parentId": 3,
	"catname": "4",
}, {
	"catid": 12,
	"parentId": 11,
	"catname": "测试分类0",
}, {
	"catid": 11,
	"parentId": 0,
	"catname": "测试分类2",
}, {
	"catid": 13,
	"parentId": 4,
	"catname": "第三级",
}, {
	"catid": 14,
	"parentId": 4,
	"catname": "测试3",
}, {
	"catid": 15,
	"parentId": 12,
	"catname": "测试分类3",
}]

嗯,理解。不就是个简单的递归嘛!我一会儿就写好了。但我担心后面其他地方还有这样类似的接口输出,那我总是写递归不就很麻烦了吗?因此,将此方法抽离,并加了一些扩展,最终方法代码如下:

export const makeElementTree = (params) => {
  // 将参数拿出来,不喜欢 params.xxx 的调用方式
  const { pid, list, pidFiled, labelFiled, valueFiled } = params
  // 构建一个内部函数,用于实现递归
  const makeTree = (pid, arr) => {
    const res = []
    arr.forEach(i => {
      if (i[pidFiled] === pid) {
        // 自己调用自己,递归查归属于自己的 children
        const children = makeTree(i[valueFiled], list)
        // 将原有的数据按照 element 的格式进行重构
        const obj = {
          label: i[labelFiled],
          value: i[valueFiled]
        }
        // 如果有 children 则插入 obj 中
        if (children.length) {
          obj.children = children
        }
        res.push(obj)
      }
    })
    return res
  }
  return makeTree(pid, list)
}

在业务代码中,我们首先引入我们的方法,然后传进去参数就可以啦,如下演示:

const treeCats = makeElementTree({
  pid: 0,               // 顶级分类的 pid 为 0
  list: data,           // 将原始数组参数穿进去
  pidFiled: 'parentId', // 在数组对象中,pid 字段名为 parentId
  labelFiled: 'catname',// 我们想要的 label 字段名为 catname
  valueFiled: 'catid'   // 我们想要的 value 字段名为 catid
})
console.log(treeCats)

通过简单的配置参数,就可以直接获得我们想要的数据格式了。

python 的实现

下面这段是我以前写 python 的时候,实现过的一个类似的递归代码,还是 python 简洁啊!

def makeTree(pid, arr):
    res = []
    for i in arr:
        if i['pid'] == pid:
            rep = makeTree(i['id'], arr)
            if len(rep) != 0:
                i['children'] = rep
            res.append(i)
    return res
res = makeTree(0, sourceList)

复习了一下递归,还是很简单的嘛!

最后,在编程中,慎用递归!!!

本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • 客制化 GH60 XD60 像 Poker 一样的 60% 机械键盘 (2) 采购以及组装

    客制化 GH60 XD60 像 Poker 一样的 60% 机械键盘 (2) 采购以及组装 在第一篇博文中 客制化键盘设计,我最终设计了如下图的键盘: ? 但是...

    FungLeo
  • vue3.0 Composition API 上手初体验 神奇的 setup 函数 (四) 计算属性 computed

    上一讲中,我们讲解了 vue 3.0 的生命周期,我相信大家已经了然了。在 vue 中,计算属性 computed 是非常常用的。那么,在 vue 3.0 中,...

    FungLeo
  • OpenCV中如何获得物体的主要方向

    问题来源为网友提供的资料,原文为:《Object Orientation, Principal Component Analysis & OpenCV》

    OpenCV学堂
  • SAP gateway系统和后台系统的OData双重cache机制

    /IWFND/CACHE_CLEANUP /IWBEP/CACHE_CLEANUP

    Jerry Wang
  • SAP gateway系统和后台系统的OData双重cache机制

    两个table用前面的前缀/BEP: backend和/FND: frontend区分

    Jerry Wang
  • 【设计模式】—— 策略模式Strategy

      模式意图   定义一系列的算法,把他们封装起来,使得算法独立于适用对象。   比如,一个系统有很多的排序算法,但是使用哪个排序算法是客户对象的自有。因此把...

    用户1154259
  • 《Spring实战》摘录 - 27

    Q: #17.3.3-1 | RabbitMQ连接工厂的作用是创建到RabbitMQ的连接

    用户1335799
  • iOS帮客户打包App上架的正确姿势

    帮客户开发的App,要以客户名义(客户开发者账号)上架,但是客户又不提供账号密码,然后也不能在iTunes Connect邀请你作为开发者。

    iOS Development
  • MVC系列之开始

       4月5号晚本来应该写出来的,这几天迷上了炉石传说,打得有点疯,明天又得上班了,收拾心情还是得写出来。上星期5晚上回家的时候,不得不吐槽一下的确有点背。6点...

    陈珙

扫码关注云+社区

领取腾讯云代金券