• 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;
                },
    
  • 相关阅读:
    centos npm run build 报错
    python base64
    Emacs 常用命令
    linux 删除文件腾出空间 遇到的问题
    网速查看工具
    linux 查看当前文件夹下的文件大小
    Docker 私有仓库push
    Harbor:Http: server gave HTTP response to HTTPS client & Get https://192.168.2.119/v2/
    docker 私有仓库搭建
    linux 修改时间
  • 原文地址:https://www.cnblogs.com/tcz1018/p/14067186.html
Copyright © 2020-2023  润新知