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" :style="{ height: '50%' }">
        <div class="picker-header">
          <van-button plain type="primary" size="small" @click="showPicker= false">取消</van-button>
          <span class="picker-title">选择人员</span>
          <van-button plain type="primary" size="small" @click="onConfirmUsers">确定</van-button>
        </div>
        <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为根据搜索栏过滤后返回的选项