uniapp picker multiSelector

### UniApp 中多列选择器组件（picker 的 multiSelector 功能）使用方法及示例 在 UniApp 中，`picker` 组件的 `multiSelector` 模式允许开发者实现多列联动的选择器。以下是关于其使用方法的详细说明和代码示例。 #### 1. 基本用法 `picker` 组件通过设置 `mode="multiSelector"` 来启用多列选择器功能。需要绑定以下属性： - **range**: 二维数组或对象数组，表示每列的数据。 - **value**: 当前选中的索引数组，长度需与 `range` 的列数一致。 - **range-key**: 如果 `range` 是对象数组，则通过此属性指定显示的字段名称[^3]。 此外，需要监听两个事件： - **@change**: 当用户完成选择时触发，返回最终选择结果。 - **@columnchange**: 当某一列数据发生变化时触发，用于动态更新其他列的内容。 #### 2. 示例代码 以下是一个完整的多列选择器示例，展示如何实现省市区三级联动： ```html <template> <view class="content"> <picker mode="multiSelector" :value="multiIndex" :range="multiArray" range-key="label" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange"> <view class="picker"> {{multiArray[0][multiIndex[0]].label}}， {{multiArray[1][multiIndex[1]].label}}， {{multiArray[2][multiIndex[2]].label}} </view> </picker> </view> </template> <script> export default { data() { return { multiArray: [[], [], []], // 初始化为三列空数组 multiIndex: [0, 0, 0], // 默认选中索引 provinceList: [], // 省份数据 cityList: [], // 城市数据 areaList: [] // 地区数据 }; }, onLoad() { this.provinceList = [ { label: "广东省", value: "gd" }, { label: "湖南省", value: "hn" } ]; this.cityList = [ [{ label: "广州市", value: "gz" }, { label: "深圳市", value: "sz" }], [{ label: "长沙市", value: "cs" }, { label: "株洲市", value: "zz" }] ]; this.areaList = [ [[{ label: "天河区", value: "th" }, { label: "白云区", value: "by" }]], [[{ label: "岳麓区", value: "yl" }, { label: "天心区", value: "tx" }]] ]; this.multiArray = [this.provinceList, this.cityList[0], this.areaList[0]]; }, methods: { bindMultiPickerChange(e) { console.log("用户最终选择:", e.detail.value); }, bindMultiPickerColumnChange(e) { const { column, value } = e.detail; if (column === 0) { this.multiIndex = [value, 0, 0]; this.multiArray[1] = this.cityList[value]; this.multiArray[2] = this.areaList[value][0]; } else if (column === 1) { this.multiIndex = [this.multiIndex[0], value, 0]; this.multiArray[2] = this.areaList[this.multiIndex[0]][value]; } this.$forceUpdate(); // 强制更新视图 } } }; </script> ``` #### 3. 关键点解析 - **数据结构**：`multiArray` 是一个二维数组，每一项对应一列的数据。如果数据是对象数组，则需要通过 `range-key` 指定显示字段[^4]。 - **动态更新**：当某一列的数据发生变化时，通过 `@columnchange` 事件动态更新其他列的内容，并调用 `$forceUpdate()` 强制刷新视图[^5]。 - **跨端兼容性**：基于 `picker` 的多列选择器不能运行在支付宝小程序上，建议使用 `picker-view` 替代[^2]。 #### 4. 注意事项 - 确保 `range` 数据的格式正确，且每列的数据数量一致。 - 如果需要处理大量数据，建议优化数据加载逻辑，避免影响性能。