公司项目开发中遇到的实际需求

 

1.后端返回的城市树状数据格式

 

 

 附上数据格式源码:

const city=[
    {
        companyId: 1,
        id: "1",
        label: "四川省",
        parentId: "",
        value: "1",
        children:[
            {
                companyId: 1,
                id: "2",
                label: "成都市",
                parentId: "1",
                value: "2",
                children:[
                    {
                        companyId: 1,
                        id: "3",
                        label: "高新区",
                        parentId: "2",
                        value: "3",
                        children:[
                            {
                                companyId: 1,
                                id: "4",
                                label: "环球中心",
                                parentId: "3",
                                value: "4"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

  由于公司项目是vue项目,所以我直接写成了单独JS文件:

    

具体使用如下:1.在utils下建立cityQueryParent.js文件

         2.cityQueryParent.js里的代码如下:

 

 附上代码:

export function getParentIdList(list, id) {
    if (!list || !id) {
        return ''
    }
    let arr = [];
    let findParent = (data, nodeId, parentId) => {
        for (var i = 0, length = data.length; i < length; i++) {
            let node = data[i];
            //由于后端返回的树状结构数组里面的value值为string类型,所以为了避免判断全等有问题,所以将传入的城市id使用toString进行了类型转换
            if (node.value === nodeId.toString()) {
                arr.unshift(nodeId.toString());
                if (nodeId.toString() === list[0].value) {
                    break
                }
                findParent(list, parentId);
                break
            } else {
                if (node.children) {
                    findParent(node.children, nodeId, node.value);
                }
                continue
            }
        }
        return arr;
    }
    return findParent(list, id);
}

  3.页面使用:

    import * as util2 from "@/utils/cityQueryParent";
    

 

 

 使用示例:

  id传入为3

 

输出结果: