uni-app 实现多个复选框 每个复选框下跟一个下拉框

在uni-app中实现多个复选框（checkbox），并且每个复选框下跟一个下拉框（picker），可以通过使用uni-app提供的组件和相应的数据绑定来实现。以下是一个简单的代码示例，展示如何实现这一功能。

页面模板 (template)

<template>
  <view class="container">
    <view v-for="(item, index) in items" :key="index" class="item">
      <checkbox :value="item.checked" @change="handleCheckboxChange(index, $event)">
        {{ item.label }}
      </checkbox>
      <picker mode="selector" :range="item.options" @change="handlePickerChange(index, $event)">
        <view class="picker">
          {{ item.selectedOption || item.options[0] }}
        </view>
      </picker>
    </view>
  </view>
</template>

页面脚本 (script)

<script>
export default {
  data() {
    return {
      items: [
        { label: '选项1', checked: false, options: ['选项1-1', '选项1-2', '选项1-3'], selectedOption: null },
        { label: '选项2', checked: false, options: ['选项2-1', '选项2-2'], selectedOption: null },
        // 更多选项...
      ]
    };
  },
  methods: {
    handleCheckboxChange(index, event) {
      this.$set(this.items, index, { ...this.items[index], checked: event.detail.value });
    },
    handlePickerChange(index, event) {
      const selected = this.items[index].options[event.detail.value];
      this.$set(this.items, index, { ...this.items[index], selectedOption: selected });
    }
  }
};
</script>

样式 (style)

<style scoped>
.container {
  padding: 20px;
}
.item {
  margin-bottom: 20px;
}
.picker {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

说明

1. 数据绑定：items数组存储了每个复选框和下拉框的数据，包括标签、是否选中、选项列表和当前选中的选项。
2. 复选框事件处理：handleCheckboxChange方法处理复选框的选中状态变化，更新对应项的checked属性。
3. 下拉框事件处理：handlePickerChange方法处理下拉框的选中值变化，更新对应项的selectedOption属性。
4. 样式：简单的样式定义，用于布局和美化。

该示例展示了如何通过数据绑定和事件处理在uni-app中实现多个复选框，每个复选框下跟一个下拉框的功能。你可以根据实际需求进一步扩展和优化代码。