uniapp vue 多个picker 用同一个数组和@change事件的bindPickerChange方法，设置不同值和获取不同值的实现方法

uniapp vue 多个picker 用同一个数组和@change事件的bindPickerChange方法，设置不同值和获取不同值的实现方法

【以下回答由 GPT 生成】

解决方案

在uniapp的vue项目中，如果想要使用同一个数组和@change事件的bindPickerChange方法来设置和获取多个picker的不同值，可以通过以下步骤来实现。

1. 在data数据中定义一个名为pickerValues的数组，该数组用于存储每个picker的值。

data() {
  return {
    pickerValues: [] // 用于存储每个picker的值
  }
}

1. 在模板中使用v-for循环来渲染多个picker组件，并绑定同一个pickerValues数组作为v-model。

<template>
  <view>
    <picker v-for="(value, index) in pickerValues" :key="index" :value="value" mode="selector" @change="bindPickerChange(index)">
      <!-- 其他picker的相关配置 -->
    </picker>
  </view>
</template>

1. 在methods中定义一个名为bindPickerChange的方法，用于设置和获取每个picker对应的值。

methods: {
  bindPickerChange(index) {
    // 修改pickerValues数组中对应位置的值
    this.pickerValues.splice(index, 1, newValue);
  }
}

通过上述步骤，我们就可以实现在uniapp的vue项目中使用同一个数组和@change事件的bindPickerChange方法来设置和获取多个picker的不同值。每个picker组件都绑定了对应位置的数组元素，修改其中一个picker的值不会影响到其他的picker。

请注意，newValue表示新选择的值，你可以根据自己的需求在bindPickerChange方法中解析和处理该值，具体实现根据你的业务逻辑进行调整。

在UniApp中，你可以通过维护一个共享的数组，并通过@change事件监听每个Picker的改变，然后根据Picker的索引来设置不同的值。

首先，你需要创建一个数组来存储所有的值：

data() {
    return {
        pickerItems: ['item1', 'item2', 'item3', 'item4']
    }
}

然后，你需要为每个Picker创建一个方法，这个方法将会在@change事件被触发时执行。在这个方法中，你可以根据Picker的索引来设置不同的值：

methods: {
    bindPickerChange(event) {
        // event.target.value 是当前选中的值
        // event.detail.value 是传入的值
        // event.detail.columnIndex 是列索引
        // event.detail.rowIndex 是行索引

        switch(event.detail.columnIndex) {
            case 0:
                this.pickerItems[event.detail.rowIndex] = event.target.value;
                break;
            case 1:
                // 根据不同的索引设置不同的值
                // ...
                break;
            // 其他情况...
        }
    }
}

然后，你需要在template中为每个Picker绑定@change事件和对应的方法：

<template>
    <view>
        <picker v-for="(items, index) in 4" :for="4" @change="bindPickerChange" :value="pickerItems[index]">
            <view v-for="item in items" :key="item">{{ item }}</view>
        </picker>
    </view>
</template>

这样，当用户在Picker中选择一个值时，bindPickerChange方法就会被调用，然后根据Picker的索引来设置不同的值。