vue3+vant3 实现选择器多选功能

效果

 因为vant3的选择器模块没有多选功能，所以要根据自己的需求去更改代码，以下是实现的代码

代码

<template>
    <van-field
        v-model="position_main_name"
        is-link
        readonly
        name="position_main_name"
        required
        label="职位关键词"
        placeholder="点击选择职位关键词"
        @click="showPicker4 = true"
        :rules="[
          {
            required: true,
            message: '请选择职位关键词',
          },
        ]"
      />
     <van-popup
        round
        v-model:show="showPicker4"
        position="bottom"
        :style="{ height: '50%' }"
      >
        <van-picker
          show-toolbar
          :columns="columns4"
          value-key="name"
          item-height="56px"
          @confirm="onConfirm4"
          @cancel="showPicker4 = false"
        >
          <template #option="option">
            <div style="width: 100%">
              <van-checkbox-group
                v-model="groupChecked"
                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>
</template>

<script>
export default {
const state = reactive({
      groupChecked: [],
      columns4: [],
      customFieldNames4: {},
      position_main_name: '',//职位关键词

})

   //获取关键词,调接口
    const getKey = () => {
      let params = {
       //传参
      }
       //写接口
    }

   // 关键词
    const onConfirm4 = () => {
      state.position_main_name = state.groupChecked;
      state.showPicker4 = false;
    };

  // 关键词名字
    const customFieldName4 = {
      text: 'name'
    };

   return {
      ...toRefs(state),
      customFieldName4,
      onConfirm4,
    }
}
</script>