vant手机端点击下拉框数据过多-添加搜索功能下拉模糊搜索

本文链接：https://blog.csdn.net/qq_41426442/article/details/124567038

本文介绍如何在项目中使用VanField组件创建一个可搜索的下拉选择器，解决会议列表过多且不易记忆的问题，通过VanPopup实现模糊查询功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提需求：

vant 并没有提供可搜索的选择器。因为项目下拉项太多，而且不好记，所以需要这个模糊查询的选择器。类似于element-ui 的可搜索Select选择器

<template>
  <div style="margin-left: 13%">
    <van-field style="width: 80%" required readonly clickable name="meetingId" :value="pagelook.position" label="" right-icon="arrow-up" placeholder="选择与我相关的会议进行筛选" @click="changePicker(1)" :rules="[{ required: true, message: '选择与我相关的会议进行筛选' }]" />
    <van-popup position="bottom" v-model="showPicker">
      <van-search placeholder="请输入会议名称" v-model="positionSearch" @search="onSearch2(positionSearch)" />
      <van-picker cancel-button-text="取消" value-key="lable" show-toolbar :columns="ret" @confirm="onConfirmPicker" @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>
<script>
import { QueryAboutMeMeetingList,  } from '../../../api/oa'
export default {
  data() {
    return {
      ret: [],
      typeFlag: '',
      positionList: [],
      showPicker: false,
      positionSearch: '',
      pagelook: {
        position: ''
      },

      meetingId: ''
    }
  },
  methods: {
        changePicker(flag) {
      this.typeFlag = flag
      if (flag === 1) {
        this.positionSearch = ''
      }
      this.showPicker = true
      this.getPositionList(1)
    },
    onSearch2(val) {
      this.ret = []
      this.positionList.forEach((item) => {
        if (item.lable.indexOf(val) > -1) {
          this.ret.push(item)
        }
      })
    },
    getPositionList(type) {
      if (type === 1) {
        this.positionList.forEach((item) => {
          if (this.positionSearch) {
            if (item.lable.indexOf(this.positionSearch) > -1) {
              this.ret.push(item)
            }
          } else {
            this.ret.push(item)
          }
        })
      }
    },
    onConfirmPicker(value) {
      if (this.typeFlag === 1) {
        this.pagelook.position = value.lable
        this.meetingId = value.value
      }
      this.onSearch()
      this.showPicker = false
      this.ret = []
    },

    onSearch(obj) {
      this.list = new Array()
      this.page = 1
      this.getWaitDoTasks()
    },

    QueryAboutMeMeetingList() {
      var user = JSON.parse(window.localStorage.user)
      let para = {
        userCode: user.sub
      }
      QueryAboutMeMeetingList(para).then((res) => {
        res.data.response.forEach((item) => {
          var obj = {}
          obj.value = item.Id
          obj.lable = item.MeetingName
          this.positionList.push(obj)
        })
      })
    }
  },
  mounted() {
    this.QueryAboutMeMeetingList()
  }
}
</script>