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;
                },
    
  • 相关阅读:
    数学工具WZgrapher
    零线和地线的区别,示波器如何测量市电?
    使用直流稳压电源时的注意事项!
    中文全角和半角输入有什么区别?
    ThinkingRock:使用方法
    2014记首
    如何使用Excel绘制甘特图
    AStyle代码格式工具在source insight中的使用
    STM32F103系列命名规则
    上市公司行情查询站点
  • 原文地址:https://www.cnblogs.com/tcz1018/p/14067186.html
Copyright © 2011-2022 走看看