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;
            },
原文地址:https://www.cnblogs.com/tcz1018/p/14067186.html