zoukankan      html  css  js  c++  java
  • 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;
                },
    
  • 相关阅读:
    TCP/IP||ARP/RARP
    TCP/IP||IP
    TCP/IP||链路层
    Struts||IQ
    SpringMVC||IQ
    TCP/IP Basic
    Spring||Mails
    Spring||Quartz
    jQuery Ajax 方法应用。
    html5的离线储存应用.
  • 原文地址:https://www.cnblogs.com/tcz1018/p/14067186.html
Copyright © 2011-2022 走看看