uniapp picker多列选择

在UniApp中，可以使用`picker`组件来实现多列选择。以下是一个示例代码：

<template>
  <view>
    <button @click="showPicker">显示选择器</button>
    <picker v-if="show" :value="value" @change="onChange">
      <picker-view>
        <picker-view-column>
          <view v-for="item in column1" :key="item">{{ item }}</view>
        </picker-view-column>
        <picker-view-column>
          <view v-for="item in column2" :key="item">{{ item }}</view>
        </picker-view-column>
        <!-- 可以添加更多的列 -->
      </picker-view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false, // 控制选择器的显示与隐藏
      value: [0, 0], // 选中的值的索引
      column1: ['选项1', '选项2', '选项3'], // 第一列的选项
      column2: ['选项A', '选项B', '选项C'] // 第二列的选项
      // 可以添加更多的列的选项
    };
  },
  methods: {
    showPicker() {
      this.show = true;
    },
    onChange(e) {
      this.value = e.mp.detail.value;
      console.log('选择的值：', this.getValue());
      // 在这里可以获取到选择的值，并进行相应处理
    },
    getValue() {
      const value = [];
      value.push(this.column1[this.value[0]]);
      value.push(this.column2[this.value[1]]);
      // 获取其他列的值，可以类似地进行处理
      return value;
    }
  }
};
</script>

在上述代码中，我们使用了`picker`组件实现了一个多列选择器。通过控制`show`属性的值来显示或隐藏选择器。使用`value`属性来表示当前选中的值的索引。当选择器的值发生变化时，会触发`change`事件，我们可以在事件处理函数中获取到选择的值，并进行相应处理。

注意，上述示例只包含了两列选择器，如果需要更多列，可以按照相同的方式添加更多的`picker-view-column`和对应的选项。

希望对你有帮助！如果还有其他问题，请随时提问。