Vant框架 picker多选框实现

vant作为一款适配手机的前端框架使用起来还是很方便的，但是对于Picker 选择器的拓展有限，不支持下拉多选的实现，这里通过van-checkbox-group 和 van-checkbox 组件来实现多选功能。
搭配van-popup 将弹窗内容写入

1.       <van-field v-model="userNameStr" readonly name="userIds" label="人员列表" placeholder="点击选择人员，可多选"
2.         @click="joinUsersHandleFocus" />
3.       <van-popup round v-model:show="showPicker" position="bottom" :>
4.         
5.           <van-button plain type="primary" size="small" @click="showPicker= false">取消</van-button>
6.           选择人员
7.           <van-button plain type="primary" size="small" @click="onConfirmUsers">确定</van-button>
8.         
9.         <van-search v-model="searchParam" placeholder="请输入搜索关键词" @search="onSearchUsers" @clear="onClearSearch" />
10.         <van-checkbox-group v-model="studentGroupChecked">
11.           <van-cell v-for="user in filteredUserOptions" :key="user.value">
12.             <template #title>
13.               <van-checkbox :name="user.value">{{ user.text }}</van-checkbox>
14.             </template>
15.           </van-cell>
16.         </van-checkbox-group>
17.       </van-popup>

复制代码

这里通过van-search控制列表搜索，展示带选择框的列表，效果如下

showPicker控制van-popup和其包含的内容是否展示，onConfirmUsers为选中后点击确认调用的方法

1. const onConfirmUsers = () => {
2.     const selectedUsers = userOptions.value.filter(user => studentGroupChecked.value.includes(user.value));
3.     showPicker.value = false;
4.   };

复制代码

通过获取studentGroupChecke的值拿到选中项，对选中项的数据进行处理

1.   const onSearchUsers = () => {
2.     if (!searchParam.value) {
3.       filteredUserOptions.value = userOptions.value;
4.       return;
5.     }
6.     filteredUserOptions.value = userOptions.value.filter(user =>
7.       user.text.toString().toLowerCase().includes(searchParam.value.toLowerCase())
8.     );
9.   };

复制代码

userOptions 为初始获取到的全部搜索内容选项，filteredUserOptions为根据搜索栏过滤后返回的选项

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！