手机端网页使用的是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; };
上边的组件代码的基本使用。复制应该就能好用。
最终效果：
有好的建议，请在下方输入你的评论。
