uniapp picker 实现二级联动

UniApp的Picker组件是一个用于选择数据的交互控件，它支持多种数据类型的筛选。实现二级联动功能通常涉及到两个Picker组件之间的联动，即第一个Picker的选择会影响到第二个Picker的数据源。

以下是步骤和示例代码：

1. **初始化数据**: 首先，你需要有一个包含两层数据结构的数据源，通常是嵌套的对象数组，如`[{label: '一级分类', children: [{label: '二级分类'}, ...]}]`。

const provinces = [
  { label: '省份一', children: [{ label: '城市一' }, { label: '城市二' }] },
  { label: '省份二', children: [{ label: '城市三' }, { label: '城市四' }] }
];

2. **绑定Picker**: 在模板上，给每个Picker设置data属性，并监听它们的变化事件，例如`change`事件。

<view>
  <picker bindchange="onProvinceChange" value="{{province}}" range="{{provinces}}">
    省份：
  </picker>
  
  <picker bindchange="onCityChange" value="{{city}}" range="{{cities}}">
    城市：
  </picker>
</view>

3. **获取和更新数据**: 在对应的事件处理函数里，根据当前选择的一级分类更新二级分类的数据源。你可以通过`this.$refs`访问到Picker实例并获取其值。

methods: {
  onProvinceChange(province) {
    this.cities = province.children;
  },
  onCityChange(city) {
    console.log('选择了:', city.label);
  }
}

4. **注意点**:
- 当数据量较大时，性能可能会受到影响，尽量优化数据结构和渲染策略。
- 如果需要更复杂的联动逻辑，比如依赖更多层级的数据，可以考虑使用递归或动态生成数据源。