vantUI用popup和picker和field做关键词搜索功能

 <van-field class="mainFileCss" v-model="currentflowmeterLocation" left-icon="search" @click="openPicker" center label="位号"
          placeholder="请输入位号">
          <template slot="button"></template>
        </van-field>


        <van-popup v-model="showPicker" class="pickerCss" position="bottom">
          <!-- v-model.trim 对关键字进行去空处理 @input 输入框自身属性，对输入的值进行实时检测 -->
          <van-field clickable v-model.trim="keyCurrentflowmeterLocation" left-icon="search" placeholder="搜索位号" @input="search"></van-field>

          <van-picker show-toolbar :columns="filterdepartments" @confirm="onConfirmss" @cancel="showPicker=false">
          </van-picker>

        </van-popup>

  //控制打开弹幕状态  
  private showPicker: boolean = false

  //打开后输入的关键词用于匹配
  private keyCurrentflowmeterLocation: string = ''
  
  //picker的显示的数据，通过tabledata和上面的关键字过滤出来的东西
  private filterdepartments: any[] = []

//打开
  private openPicker() {
    this.showPicker = true
    this.filterdepartments = []
    this.keyCurrentflowmeterLocation = ''
    this.search()
  }

  //搜索  根据关键字搞一次搜索
  private search() {
    this.filterdepartments = []
    let res = this.tableData.filter((params) => {
      return params.flowmeterLocation.includes(this.keyCurrentflowmeterLocation)
    })
    console.log('搜索res', res)
    res.forEach((item) => {
      this.filterdepartments.push(item.flowmeterLocation)
    })
    console.log('搜索', this.filterdepartments)
  }

//点击确定后的操作
  private onConfirmss(value) {
    this.currentflowmeterLocation = value
    this.onInputBlur()
    this.showPicker = false
  }