HarmonyOS 需求一个省市县的级联选择框？

Question

需求一个省市县（以及省市县镇四级）的级联选择框。

需求明细：

1、如果传了初始值，就默认按初始值设置当前选中。如果没有，默认显示第一级列表（或者取当前地理位置）

2、自定义每一级列表数据来源，可能来源于一个固定的列表，也有可能来源于HTTP接口。

3、如果某一级的选中的列表项是“其他”，那么不再进行后一级列表项的选择。比如选择“湖北/其他”，就不用选择第三级列表（县）。

4、可选的“确定”按钮。

Answer 1

请参考以下demo实现：

import { it } from '@ohos/hypium';

@Observed
class StringArray extends Array<String> {
}

const cityData: string[][] = [['辽宁省', '吉林省', '黑龙江省'], ['沈阳市', '大连市', '长春市'], ['东安区', '西安区', '爱民区']]

@Entry
@Component
struct TabsExample6 {
  private controller: TabsController = new TabsController()
  @State titleArray: Array<string> = ['辽宁省','请选择','请选择']
  @State arr: Array<StringArray> = [];

  aboutToAppear(): void {
    this.arr.push(['辽宁省', '吉林省', '黑龙江省'], ['沈阳市', '大连市', '长春市', '其他'], ['东安区', '西安区', '爱民区', '其他']);
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.arr, (itemArr: StringArray, index: number) => {
          TabContent() {
            Column() {
              ForEach(itemArr, (item: string) => {
                ListItem() {
                  Row(){
                    Text(item).fontSize(16).width('80%').align(Alignment.Start)
                      .fontColor(this.titleArray[index] === item ? '#007DFF' : '#182431')
                    Text("已选中").fontSize(16).width('80%').align(Alignment.Start).fontColor('#007DFF').visibility(this.titleArray[index] === item ? Visibility.Visible : Visibility.Hidden)
                  }
                }
                .width('80%').height(30).onClick(() => {
                  if (this.titleArray[index] != item) {
                    this.titleArray[index] = item;
                    if (index < cityData.length - 1 && item !== "其他") {
                      // this.titleArray.splice(index + 1)
                      // this.titleArray.push("请选择")
                      // this.arr.splice(index + 1)
                      // this.arr.push(cityData[index + 1])

                      setTimeout(() => {
                        this.controller.changeIndex(index + 1)
                      }, 100);
                    }
                    if (item === "其他") {
                      this.titleArray.splice(index + 1)
                    }
                  }
                })
              }, (item: string) => item)
            }.height("100%").width("100%")
          }
          .tabBar(this.titleArray[index])
        }, (item: string) => item)
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(80)
      .animationDuration(200)
      .onChange((index: number) => {
        console.info(index.toString())
      })
    }
  }
}