uniapp多列选择器如何实现

在uniapp中如何实现多列选择器？官方文档中似乎没有明确的示例。我想实现一个类似省市区的三级联动选择器，但不知道应该如何配置picker组件的mode和多列数据源。有哪位大佬能提供一个完整的代码示例吗？包括数据格式和picker的配置方法。

2 回复

uniapp多列选择器可通过picker组件实现，设置mode="multiSelector"，绑定range数组和value值。通过监听columnchange事件动态更新数据，bindchange获取最终选择结果。


在 UniApp 中，多列选择器可以通过 picker 组件的 mode="multiSelector" 实现。它允许用户从多个列中选择数据，常用于日期、地址或自定义多级联动场景。

实现步骤：

  1. 在模板中添加 picker 组件：设置 mode="multiSelector"，并绑定数据与事件。
  2. 定义数据：包括选择器的列数据数组和当前选中的索引数组。
  3. 处理事件：监听 bindchange 事件，更新选中值。

示例代码：

<template>
  <view>
    <picker 
      mode="multiSelector" 
      :range="multiArray" 
      :value="multiIndex" 
      [@change](/user/change)="onMultiChange" 
      [@columnchange](/user/columnchange)="onColumnChange"
    >
      <view>当前选择：{{ selectedValues.join(' - ') }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      multiArray: [
        ['前端', '后端', '移动端'],
        ['Vue', 'React', 'Angular'],
        ['初级', '中级', '高级']
      ],
      multiIndex: [0, 0, 0],
      selectedValues: ['前端', 'Vue', '初级']
    };
  },
  methods: {
    onMultiChange(e) {
      this.multiIndex = e.detail.value;
      this.updateSelectedValues();
    },
    onColumnChange(e) {
      // 处理列变化时的联动逻辑（例如地址选择器）
      const { column, value } = e.detail;
      // 示例：简单更新当前列索引
      this.multiIndex[column] = value;
      this.updateSelectedValues();
    },
    updateSelectedValues() {
      this.selectedValues = this.multiArray.map((col, i) => col[this.multiIndex[i]]);
    }
  }
};
</script>

关键点说明：

  • range：二维数组，定义每列的可选数据。
  • value：数组，表示每列当前选中的索引。
  • @change：选择器值变化时触发。
  • @columnchange：某一列值变化时触发，适用于联动更新其他列数据。

注意事项：

  • 若需实现联动效果（如省市区选择），需在 [@columnchange](/user/columnchange) 中动态更新后续列的数据。
  • 数据格式需严格保持二维数组结构。

根据实际需求调整数据源和联动逻辑即可。

回到顶部