如何在 PickerView 中动态设置选项？

Question

我在用 PickerView 组件做一个级联选择，比如选择城市的时候需要根据省份的不同动态设置选项内容。但是我不知道怎么让 PickerView 的选项列表在运行时根据用户的选择动态更新。大家有没有遇到过类似的问题？能不能用代码展示一下实现的方法？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以通过动态更新columns属性来实现。

import { PickerView, PickerViewColumn } from '@ohos/arkui';

@Entry
@Component
struct CascadePicker {
  build() {
    Column() {
      // 创建PickerView组件
      PickerView({
        columns: this.columns,
        onSelectChange: (indexes) => {
          this.onSelectChange(indexes);
        },
      })
    }
  }

  // 省份数据
  provinceList = [
    { value: 'beijing', label: '北京' },
    { value: 'shanghai', label: '上海' },
    // 更多省份...
  ];

  // 城市数据
  cityList = [
    { value: 'beijing', label: '北京', cities: ['东城', '西城', '朝阳', '海淀'] },
    { value: 'shanghai', label: '上海', cities: ['黄浦', '徐汇', '长宁', '静安'] },
    // 更多城市...
  ];

  // PickerView的columns属性，初始设置为省份列表
  get columns() {
    return [
      new PickerViewColumn(this.provinceList.map(item => item.label)),
    ];
  }

  // 处理选项变化
  onSelectChange(indexes) {
    const provinceIndex = indexes[0]; // 获取省份选择的索引
    const selectedProvince = this.provinceList[provinceIndex]; // 获取选中的省份

    // 根据选中的省份，更新城市列表
    const cityColumn = new PickerViewColumn(selectedProvince.cities.map(city => city));
    this.columns = [new PickerViewColumn(this.provinceList.map(item => item.label)), cityColumn];
  }
}