van-picker中添加搜索功能

 <!-- 处置部门 -->
        <van-field readonly clickable name="picker" v-model="form.depName" label="处置部门" placeholder="请选择" @click="chooseDep" required :rules="[{ required: true, message: '请选择' }]" />
        <van-popup round v-model="depNameShow" position="bottom">
          <van-search placeholder="请输入" v-model="depNameValue" />
          <van-picker value-key="label" show-toolbar :columns="depColumns" @confirm="depNameonConfirm" @cancel="depNameShow = false" />
        </van-popup>

// 选择部门
    chooseDep() {
      // 获取部门接口
      this.depNameValue = ''
      getLoginUserAvailableDepForOption({}).then(({ data }) => {
        let tempDep = data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
        tempDep.shift()
        this.depColumns = tempDep
        this.depColumnsSearch = tempDep
      })
      this.depNameShow = true
    },

监听用作搜索功能

 watch: {
    // 搜索部门
    depNameValue: {
      handler() {
        if (this.depNameValue == '') {
          this.depColumns = this.depColumnsSearch
        } else {
          this.depColumns = []
          this.depColumnsSearch.forEach(item => {
            if (item.label.indexOf(this.depNameValue) > -1) {
              this.depColumns.push(item)
            }
          })
        }
      },
      immediate:true
    },
    // 搜索处置人员
    userNameValue: {
      handler() {
        if (this.userNameValue == '') {
          this.userColumns = this.userColumnsSearch
        } else {
          this.userColumns = []
          this.userColumnsSearch.forEach(item => {
            if (item.label.indexOf(this.userNameValue) > -1) {
              this.userColumns.push(item)
            }
          })
        }
      },
      immediate:true
    }
  },

    // 部门下拉框点击确定
    depNameonConfirm(e) {
      this.form.userName = ''
      this.form.userCode = '';//重新选择部门的时候需要把人员清空
      this.form.depName = e.label
      this.form.depCode = e.value
      this.depNameShow = false
    },