Vant框架 picker多选框实现
vant作为一款适配手机的前端框架使用起来还是很方便的，但是对于Picker 选择器的拓展有限，不支持下拉多选的实现，这里通过van-checkbox-group 和 van-checkbox 组件来实现多选功能。搭配van-popup 将弹窗内容写入
<van-field v-model="userNameStr" readonly name="userIds" label="人员列表" placeholder="点击选择人员，可多选"
@click="joinUsersHandleFocus" />
<van-popup round v-model:show="showPicker" position="bottom" :>
<van-button plain type="primary" size="small" @click="showPicker= false">取消</van-button>
选择人员
<van-button plain type="primary" size="small" @click="onConfirmUsers">确定</van-button>
<van-search v-model="searchParam" placeholder="请输入搜索关键词" @search="onSearchUsers" @clear="onClearSearch" />
<van-checkbox-group v-model="studentGroupChecked">
<van-cell v-for="user in filteredUserOptions" :key="user.value">
<template #title>
<van-checkbox :name="user.value">{{ user.text }}</van-checkbox>
</template>
</van-cell>
</van-checkbox-group>
</van-popup>这里通过van-search控制列表搜索，展示带选择框的列表，效果如下
showPicker控制van-popup和其包含的内容是否展示，onConfirmUsers为选中后点击确认调用的方法
const onConfirmUsers = () => {
const selectedUsers = userOptions.value.filter(user => studentGroupChecked.value.includes(user.value));
showPicker.value = false;
};通过获取studentGroupChecke的值拿到选中项，对选中项的数据进行处理
const onSearchUsers = () => {
if (!searchParam.value) {
filteredUserOptions.value = userOptions.value;
return;
}
filteredUserOptions.value = userOptions.value.filter(user =>
user.text.toString().toLowerCase().includes(searchParam.value.toLowerCase())
);
};userOptions 为初始获取到的全部搜索内容选项，filteredUserOptions为根据搜索栏过滤后返回的选项
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]