前提需求：
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 = flagif (flag === 1) {this.positionSearch = ''}this.showPicker = truethis.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.lablethis.meetingId = value.value}this.onSearch()this.showPicker = falsethis.ret = []},onSearch(obj) {this.list = new Array()this.page = 1this.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.Idobj.lable = item.MeetingNamethis.positionList.push(obj)})})}},mounted() {this.QueryAboutMeMeetingList()}}</script>
