树状图异步请求时的数据处理

      在使用ant-design的Tree时，由于每一层的数据较大，不能一次性把数据全部拉取出来，使用了Tree中的loadData后最大的难题就是把每一层的children数据放到树节点中了。我们数据结构大概是这样的

list = [
    {
        id:1,
        children: null,
        parent: true
    }
]

list2 = [
    {
        id: 1-1,
        children: null,
        parent: true
    }, {
        id: 1-2,
        children: null,
        parent: true
    }
]

list3 = [
    {
        id: 1-1-1,
        children:null,
        parent: false
    }, {
        id: 1-1-2,
        children:null,
        parent: false
    }
]

tree的第一层,parent判断是否有下一级的节点，如果有在通过传id调用下一级的节点的信息,我们假设这个树有三层，后面的list2和list3就是分别拿上一级的id查找出来的。由于不知道有多少层，所以是需要使用正递归的方法。

// ajax请求，data为现有的tree数据,id是需要查找children的id，调用获取到的数据为data
getNodes(dataList, id) {
    this.addTreeNodes(dataList, data, id)
}

addTreeNodes(dataList, data, id) {
    const arr = []
    let obj = {}
    dataList.forEach(item => {
        const tmp = _.cloneDeep(item)
        if (tmp.children && tmp.children.length > 0) {
            tmp.children = this.addTreeNodes(tmp.children, data, id)
            obj = _.cloneDeep(tmp)        
        } else {
            obj = _.cloneDeep(tmp)
            if (tmp.id === id) {
                obj.children = data
            }
        }
    arr.push(obj)
    })
    return arr
}