js再帰生成ツリー構造、

3847 ワード

バックエンドはjson配列を取得し,ツリー構造になり,以下は直接コードを上げる.
まず集合のデータフォーマットはこうです.
データ:
[
    {
        "id": 1,
        "name": "11111111 ",
        "parentId": 0
    },
    {
        "id": 2,
        "name": "2 ",
        "parentId": 0
    },
    {
        "id": 4,
        "name": "1   2",
        "parentId": 1
    },
    {
        "id": 6,
        "name": "    ",
        "parentId": 4
    },
    {
        "id": 12,
        "name": "566666",
        "parentId": 2
    },
    {
        "id": 13,
        "name": "33333 ",
        "parentId": 0
    },
    {
        "id": 14,
        "name": "7567566765",
        "parentId": 13
    },
    {
        "id": 15,
        "name": "1312",
        "parentId": 6
    }
]

ツリー構造コードを生成するには、次の手順に従います.
 load() {
                loadCatOptions().then(res => {//        
                    this.catOptions = this.generateOptions(res);
                    console.log(this.catOptions);
                })
            },

            generateOptions(params) {//  Cascader    
                var result = [];
                for (let param of params) {
                    if (param.parentId == 0) {//         
                        var parent = {//   el-Cascader         
                            'label': param.name,
                            'value': param.id
                        }
                        parent.children = this.getchilds(param.id, params);//     
                        result.push(parent);
                    }
                }
                return result;
            },

            getchilds(id, array) {
                let childs = new Array();
                for (let arr of array) {//       
                    if (arr.parentId == id) {
                        childs.push({
                            'label': arr.name,
                            'value': arr.id
                        });
                    }
                }
                for (let child of childs) {//         
                    let childscopy = this.getchilds(child.value, array);//       
                    console.log(childscopy)
                    if (childscopy.length > 0) {
                        child.children = childscopy;
                    }
                }
                return childs;
            },

変換後のデータ:
[
    {
        "children": [
            {
                "children": [
                    {
                        "children": [
                            {
                                "label": "1312",
                                "value": 15
                            }
                        ],
                        "label": "    ",
                        "value": 6
                    }
                ],
                "label": "1   2",
                "value": 4
            }
        ],
        "label": "11111111 ",
        "value": 1
    },
    {
        "children": [
            {
                "label": "566666",
                "value": 12
            }
        ],
        "label": "2 ",
        "value": 2
    },
    {
        "children": [
            {
                "label": "7567566765",
                "value": 14
            }
        ],
        "label": "33333 ",
        "value": 13
    }
]