Ant Design Vue 树形控件中通过递归将数组转为treeData数据

前言

这段时间在项目的时候遇到一个要使用递归将后端返回来的Array数据转成在Ant Design Vue中
可以直接绑定的 （ :tree-data=“treeData” ）多个根目录且不限制层级数量的数据，经过不懈的努力，终于写好了，记录一下。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.获取数据

代码如下（示例）：

    // 获取数组数据
    getData() {
      xxxxxxxxx().then((res) => { //xxxxxx为接口
        console.log("所有目录信息", res.data);
        this.treeData = this.getTreeData(res.data) // 拿到数据，调用
      });
    },

2.递归数据处理（多个根节点且不限制层级数量）

代码如下（示例）：

	// 处理数据
    getTreeData(val) {
      //根据后端返回数据，先将根节点与其它节点分离
      let parent = val.filter((item) => item.FatherId === null); //此处根据实际业务判断
      let child = val.filter((item) => item.FatherId != 0); //此处根据实际业务判断
      
	  //对所有根节点添加children数组key，并进入方法
	  //title和key为ui框架必传值
      parent.filter((item) => {
        item.children = sonArrs(item.id, child)
        item.title = item.title
        item.key = item.id
      });
      
      //递归方法
      function sonArrs(id, childs) {
      
        //结束条件
        if(!childs.length) return
		
		//定义数组，匹配上一级节点的子节点数据并返回
        let arr = childs.filter((item) => {
          return item.FatherId === id;
        });

		//对上一步返回的节点添加children数组,title和key
        arr.filter((item) => {
          item.children = []
          item.title = item.title
          item.key = item.id
        });
		
		//定义数组，匹配上一级节点的下下层数据并返回
        let sonArr = childs.filter((item) => {
          return item.FatherId !== id;
        });

		//开启递归
        arr.forEach(element => {
          element.children = sonArrs(element.id,sonArr)
        });

		//返回的为上一级的children的value
        return arr
      }
		
	  //最终返回treeData格式数据
      return parent;
    },

总结

以上就是今天要讲的内容，本文简单介绍了使用递归处理数据，如果对你有所帮助，希望可以点赞收藏，如果有不正确的地方或者不好理解的地方还希望留言希望指出，一同探讨进步。