公司项目开发中遇到的实际需求
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
输出结果: