#鸿蒙通关秘籍#在HarmonyOS Next中如何实现省市区数据的树形结构？

type CascaderOption = {
  text: string;
  children?: CascaderOption[];
};

const makeOption = (
  text: string,
  children?: CascaderOption[],
): CascaderOption => ({
  text,
  children,
});

export function useCascaderAreaData() {
  const {
    city_list: city,
    county_list: county,
    province_list: province,
  } = areaList;

  const provinceMap = new Map<string, CascaderOption>();
  Object.keys(province).forEach((code) => {
    provinceMap.set(code.slice(0, 2), makeOption(province[code],  []));
  });

  const cityMap = new Map<string, CascaderOption>();

  Object.keys(city).forEach((code) => {
    const option = makeOption(city[code],  []);
    cityMap.set(code.slice(0, 4), option);

    const province = provinceMap.get(code.slice(0, 2));
    if (province) {
      province.children!.push(option);
    }
  });

  Object.keys(county).forEach((code) => {
    const city = cityMap.get(code.slice(0, 4));
    if (city) {
      city.children!.push(makeOption(county[code]));
    }
  });

  return Array.from(provinceMap.values());
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.