怎么在uniapp中出现多项选择框

在 Uniapp 中，可以使用 `<picker>` 组件来实现多项选择框的功能。 `<picker>` 组件可以用来选择一个或多个值，包括文本、数字、日期等。

下面是一个示例代码，演示如何在 Uniapp 中使用 `<picker>` 组件实现多项选择框：

<template>
  <view>
    <button @click="showPicker">打开选择框</button>
    <picker v-model="selectedItems" mode="multiSelector" :range="options" @confirm="confirmPicker"></picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [
        ['选项1', '选项2', '选项3'], // 第一列选项
        ['选项A', '选项B', '选项C'], // 第二列选项
        ['选项X', '选项Y', '选项Z']  // 第三列选项
      ],
      selectedItems: [0, 0, 0] // 默认选中的项
    };
  },
  methods: {
    showPicker() {
      this.$refs.picker.open(); // 打开选择框
    },
    confirmPicker(value) {
      console.log("已选择的值：", value);
    }
  }
}
</script>

在上述示例中，点击按钮后会打开一个选择框，选择框中有三列选项。用户可以通过滑动选择不同列的选项，最后点击确定按钮确认选择。选择结果会通过 `confirmPicker` 方法中的 `value` 参数返回，你可以在该方法中对选择结果进行处理。

注意，上述代码中使用了 `<picker>` 组件的多项选择模式 `mode="multiSelector"`，并通过 `v-model` 绑定了 `selectedItems` 数据，以便获取用户的选择结果。