数组列表转为树形数组

简介

        在实际开发过程中，如果从接口获取的数据为数组列表（但其实是树形结构），那么在前端要求以树形结构显示，便需要进行一定的转换。

方法

1 数据示例

const testData = [
    {
        DLID: 'E65B739967A143AC8D95DF7EA217294E',
        FDLID: 'root',
        DICCODE: '0190b46a-c151-4d75-a7d2-1d84a8aa44fe',
        DLMC: '园地',
        DLBM: '02',
        DLLX: 1,
        DLJB: 1,
        DLBZ: null,
        STMJ: null,
        SORTNUM: 5,
    },
    {
        DLID: '65769A7877A040669BACCD0660E1E519',
        FDLID: 'E65B739967A143AC8D95DF7EA217294E',
        DICCODE: '0190b46a-c151-4d75-a7d2-1d84a8aa44fe',
        DLMC: '果园',
        DLBM: '0201',
        DLLX: 1,
        DLJB: 2,
        DLBZ: null,
        STMJ: null,
        SORTNUM: 6,
    },
    {
        DLID: '28BFD3C379364048B5738F1162CDE448',
        FDLID: 'E65B739967A143AC8D95DF7EA217294E',
        DICCODE: '0190b46a-c151-4d75-a7d2-1d84a8aa44fe',
        DLMC: '茶园',
        DLBM: '0202',
        DLLX: 1,
        DLJB: 2,
        DLBZ: null,
        STMJ: null,
        SORTNUM: 7,
    },
    {
        DLID: '9D10C5FFD14946989E52081142C7BCA7',
        FDLID: 'E65B739967A143AC8D95DF7EA217294E',
        DICCODE: '0190b46a-c151-4d75-a7d2-1d84a8aa44fe',
        DLMC: '橡胶园',
        DLBM: '0203',
        DLLX: 1,
        DLJB: 2,
        DLBZ: null,
        STMJ: null,
        SORTNUM: 8,
    },
]

2 方法

        该方法中，父节点id名称、id、编码、名称之类的，可以根据自己数据的实际需求去做一定的调整。

tranListToTreeData(list, rootValue) {
    let arr = []
    list.forEach((item) => {
        const res = {
            label: item.DLMC,
            value: item.DLBM,
        }
        if (item.FDLID === rootValue) {
            // 找到之后 就要去找 item 下面有没有子节点
            const children = tranListToTreeData(list, item.DLID)
            if (children.length) {
                // 如果children的长度大于0 说明找到了子节点
                item.children = children
                res.children = children
            }
            arr.push(res) // 将内容加入到数组中
        }
    })
    return arr
}

3 调用输出

const res = tranListToTreeData(testData, 'root')
console.log(res);
// 输出结果
[
    {
        "label": "园地",
        "value": "02",
        "children": [
            {
                "label": "果园",
                "value": "0201"
            },
            {
                "label": "茶园",
                "value": "0202"
            },
            {
                "label": "橡胶园",
                "value": "0203"
            }
        ]
    }
]