uniapp picker多列选择器 实现二级联动

### 如何在 UniApp 中实现 Picker 组件的二级联动效果 #### 1. 页面结构设计 在页面中引入 `u-picker` 或原生 `<picker>` 组件作为多列选择器的基础。以下是基于 `u-picker` 的示例代码： ```html <u-picker keyName="name" :show="isPickerVisible" @cancel="isPickerVisible=false" ref="uPicker" class="uPicker" :columns="pickerColumns" @confirm="onPickerConfirm" @change="onChangeHandler" ></u-picker> ``` 上述代码定义了一个双列表的选择器，其中每一列的内容由 `pickerColumns` 控制。 --- #### 2. 数据准备与初始化 为了实现二级联动，需要预先准备好基础数据并设置默认状态。以下是一个简单的省份和城市的数据模型： ```javascript data() { return { isPickerVisible: false, // 是否显示选择器 pickerColumns: [[], []], // 初始化两列为空数组 provinceCityData: [ { name: '北京', children: [{ name: '北京市' }] }, { name: '广东', children: [{ name: '广州市' }, { name: '深圳市' }] }, { name: '江苏', children: [{ name: '南京市' }, { name: '苏州市' }] } ], selectedProvinceIndex: 0, selectedCityIndex: 0 }; } ``` 在此处，`provinceCityData` 是一个嵌套对象数组，表示省份及其对应的城市集合[^3]。 --- #### 3. 方法实现 ##### 显示/隐藏选择器 通过修改 `isPickerVisible` 来控制选择器的可见性： ```javascript methods: { togglePickerVisibility() { this.isPickerVisible = !this.isPickerVisible; if (this.pickerColumns[0].length === 0) { this.initPickerColumns(); } }, initPickerColumns() { const provinces = this.provinceCityData.map(item => item.name); this.pickerColumns = [provinces, []]; } } ``` 当首次打开选择器时，调用 `initPickerColumns()` 将第一列填充为所有可用的省份名称，并将第二列置为空。 --- ##### 联动逻辑处理 监听选择器的变化事件，在切换第一列（省份）时动态更新第二列（城市）的内容： ```javascript onChangeHandler(e) { const currentColumn = e.detail.column; // 当前改变的是哪一列 const currentIndex = e.detail.index; // 改变后的索引位置 if (currentColumn === 0) { // 如果是第一列发生变化 const selectedProvinceChildren = this.provinceCityData[currentIndex].children || []; const cityNames = selectedProvinceChildren.map(city => city.name); this.selectedProvinceIndex = currentIndex; this.pickerColumns[1] = cityNames; // 默认重置第二列为第一个城市的值 this.$refs.uPicker.setIndexes([currentIndex, 0]); } }, ``` 此部分实现了核心的联动机制：每当用户更改第一列的选项时，都会重新计算第二列的内容并刷新视图[^2]。 --- ##### 确认按钮回调 确认用户的最终选择并将结果显示出来： ```javascript onPickerConfirm(e) { const result = e.detail.value; // 获取每列的当前选中项 const chosenProvince = this.pickerColumns[0][result[0]]; const chosenCity = this.pickerColumns[1][result[1]]; console.log(`您选择了 ${chosenProvince} -> ${chosenCity}`); this.isPickerVisible = false; // 关闭选择器 } ``` 此处提取了用户最后选定的结果，并将其打印到控制台或用于其他业务逻辑[^1]。 --- ### 完整示例总结 以上代码片段展示了如何利用 `u-picker` 实现二级联动的效果。具体来说，它涵盖了以下几个方面： - **页面布局**：使用 `u-picker` 插件构建多列选择器。 - **数据绑定**：通过 `pickerColumns` 属性管理各列内容。 - **联动逻辑**：借助 `@change` 事件动态调整子列内容。 - **结果获取**：捕获用户提交的信息并通过 `@confirm` 进行后续处理。 ---