1. 程式人生 > 實用技巧 >vue資料處理,父子相關資料處理

vue資料處理,父子相關資料處理

資料處理,父子相關資料處理

目的 實現完成Antd IView 等等 樹形控制元件的顯示



需要的資料格式就是
就是每個節點的資料都是放在children裡面的

處理方法:

首先判斷依據就是 我的父節點(parentId)別的indexId就證明是有關係的
所以我們首先要把所有的父節點都找出來,也就是我的parentId沒有和其餘indexid相同的,就證明我就是最外層的父節點。(這樣的情況會出現多個父節點就是有多棵樹了)
還有就是要是你的專案裡面 就只有一個父節點,那你就把資料寫死,要是沒有這個父節點,就全部沒有資料

注意: 裡面的parentIndexCode和indexCode,分別對於父子資料的對應關係,還有就是需要整理出來資料,自己往上寫,最後會整個return出來

// 處理相應的父子資料
            toTreeData(data) {
                let resData = data;
                let tree = [];

                for (let i = 0; i < resData.length; i++) {
                    if (resData.filter(item => resData[i].parentIndexCode == item.indexCode).length == 0) {
                        let obj = {
                            value: resData[i].indexCode,
                            key: resData[i].indexCode.toString(),
                            title: resData[i].name,
                            indexCode: resData[i].indexCode,
                            parentIndexCode: resData[i].parentIndexCode,
                            slots: {
                                icon: 'global',
                            },
                            children: []
                        };
                        tree.push(obj);
                        // resData.splice(i, 1);
                    }

                }
                run(tree);

                function run(chiArr) {
                    if (resData.length !== 0) {
                        for (let i = 0; i < chiArr.length; i++) {
                            for (let j = 0; j < resData.length; j++) {
                                if (chiArr[i].indexCode == resData[j].parentIndexCode) {

                                    let obj = {
                                        value: resData[j].indexCode,
                                        key: resData[j].indexCode,
                                        title: resData[j].name,
                                        indexCode: resData[j].indexCode,
                                        slots: {
                                            icon: 'environment',
                                        },
                                        parentIndexCode: resData[j].parentIndexCode,
                                        children: []
                                    };
                                    chiArr[i].children.push(obj);
                                    resData.splice(j, 1);
                                    j--;
                                }
                            }
                            run(chiArr[i].children);
                        }
                    }
                }

                return tree;
            },