<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 = truethis.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 = valuethis.onInputBlur()this.showPicker = false}