vant下拉加模糊查询

如果你使用的是vant 2.x版本，可以使用vant的Search组件进行模糊查询，结合vant的DropdownMenu组件实现下拉选择项。具体实现过程如下：

1. 安装vant组件库：在项目中执行以下命令进行安装

npm i vant -S

2. 引入vant组件库：在需要使用的页面中引入vant组件库

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

3. 使用Search组件：在需要使用下拉搜索的地方，使用vant的Search组件进行模糊查询

<van-search v-model="searchValue" placeholder="请输入" show-action @search="onSearch" />

其中，v-model绑定搜索框的值，placeholder设置提示语，show-action设置是否显示右侧操作按钮，@search绑定搜索事件。

4. 使用DropdownMenu组件：在需要选择的地方，使用vant的DropdownMenu组件进行下拉选择

<van-dropdown-menu v-model="activeMenu" :height="200" @change="onChange">
  <van-dropdown-item v-for="item in options" :key="item.value" :value="item.value" :title="item.text">
    {{ item.text }}
  </van-dropdown-item>
</van-dropdown-menu>

其中，v-model绑定选中项的索引值，:height设置下拉框的高度，@change绑定选中项变化的事件，van-dropdown-item为下拉选择项。

5. 实现模糊查询和下拉选择的交互：在数据中维护所有可选项的列表，当搜索框的值发生变化时，使用过滤函数过滤所有可选项，只保留符合条件的项，并更新下拉选择框的选项列表。当选择下拉框的选项时，更新选中项的值。

export default {
  data() {
    return {
      options: [
        { value: 'apple', text: '苹果' },
        { value: 'banana', text: '香蕉' },
        { value: 'pear', text: '梨子' },
        { value: 'orange', text: '橙子' },
      ],
      activeMenu: 0,
      searchValue: '',
      filteredOptions: [],
    };
  },
  methods: {
    onSearch() {
      this.filteredOptions = this.options.filter(item =>
        item.text.includes(this.searchValue)
      );
      if (this.filteredOptions.length === 0) {
        this.activeMenu = -1;
      } else {
        this.activeMenu = 0;
      }
    },
    onChange(index) {
      this.activeMenu = index;
    },
  },
};

这样，就可以使用vant的Search组件和DropdownMenu组件实现下拉选择加模糊查询的功能了。