在uni-app的picker选择器中实现多选框

在uni-app的picker选择器中，由于picker组件本身并不支持多选框，所以需要自己实现。以下是一种实现方式：

1. 在data中定义一个数组，用于存储选择的选项。

data: {
  options: ['选项A', '选项B', '选项C', '选项D', '选项E'],
  selectedOptions: []
}

2. 在picker的列数（column）中添加一个自定义的选项列，用于显示多选框。

<picker mode="multiSelector" :value="[selectedOptions]" @change="onPickerChange">
  <picker-view-column>
    <view class="multi-selector">
      <block wx:for="{{options}}">
        <view class="multi-selector-item" :class="{ 'multi-selector-item-selected': isSelected($index) }" @tap="onOptionTap($index)">{{item}}</view>
      </block>
    </view>
  </picker-view-column>
</picker>

3. 在样式中定义多选框的样式。

.multi-selector {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 200rpx;
  overflow-y: scroll;
}

.multi-selector-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 80rpx;
  margin: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.multi-selector-item-selected {
  background-color: #007aff;
  color: #fff;
}

4. 在methods中实现多选框的逻辑。

methods: {
  onOptionTap(index) {
    const selectedOptions = this.selectedOptions
    const option = this.options[index]
    const optionIndex = selectedOptions.indexOf(option)

    if (optionIndex === -1) {
      selectedOptions.push(option)
    } else {
      selectedOptions.splice(optionIndex, 1)
    }

    this.selectedOptions = selectedOptions
  },

  isSelected(index) {
    return this.selectedOptions.indexOf(this.options[index]) !== -1
  },

  onPickerChange(event) {
    const selectedOptions = event.detail.value[0].map(index => this.options[index])
    this.selectedOptions = selectedOptions
  }
}

这样就可以在uni-app的picker选择器中实现多选框了。需要注意的是，由于picker组件的value属性必须是一个数组，所以需要将selectedOptions数组包装成一个数组进行传递。同时，在picker的change事件中，需要通过event.detail.value[0]获取到多选框的选项索引数组，再通过map方法将索引转换成选项值数组。