vant（一）基于picker单选组件自定义picker多选组件~

手机端网页使用的是vant组件库。

有需求需要使用多选的picker组件，但是vant组件库中只有单选的picker组件。

嗯，可能我们需要基于vant的单选picker组件和checkbox组件来自定义一个多选的picker组件。

代码版本：vue3.2+vant4.0.10

Vue组件代码：

    <van-field
      v-model="position_main_name"
      readonly
      name="position_main_name"
      label="学生列表"
      placeholder="点击选择学生，可多选！"
      required
      @click="showStudentSelectPicker = true"
      :rules="[
        {
          required: true,
          message: '请选择学生！',
        },
      ]"
    />
  <van-popup
    round
    v-model:show="showStudentSelectPicker"
    position="bottom"
    :style="{ height: '50%' }"
  >
    <van-picker
      :columns="studentList"
      value-key="name"
      item-height="56px"
      @confirm="onConfirm"
      @cancel="showStudentSelectPicker = false"
    >
      <template #option="option">
        <div style="width: 100%">
          <van-checkbox-group
            v-model="studentGroupChecked"
            style="display: inline-block; margin-left: 130px"
          >
            <van-checkbox :name="option.name" shape="square">{{
              option.name
            }}</van-checkbox>
          </van-checkbox-group>
        </div>
      </template>
    </van-picker>
  </van-popup>

组件js代码：

// 学生列表
export const studentList = ref(Array(<any>[{name: "潇寒-1"}, {name: "宋俊铭-123456"}]));
// 选择下拉列表弹窗标识
export const showStudentSelectPicker = ref(<boolean>false);
// 学生下拉列表框显示
export const position_main_name = ref(<any>'');
// 学生选中值
export const studentGroupChecked = ref(Array(<any>[]));
/**
 * @name: 选择学生下拉列表点击确定
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2023-01-18 22:47:46
 */
export const onConfirm = () => {
    let array = <any>[];
    studentGroupChecked.value.forEach(function (item:any) {
        if(item != '')
        {
            array.push(item);
        }
    });
    studentGroupChecked.value = array;
    position_main_name.value = studentGroupChecked.value;
    showStudentSelectPicker.value = false;
};

上边的组件代码的基本使用。复制应该就能好用。

最终效果：

有好的建议，请在下方输入你的评论。