ant-design vue select组件实时远程查询接口数

      <a-row>
        <a-col :span="8" :offset="6">
          <a-form-item
            label='名称:'
          >
            <a-select
              v-decorator="['bankCode',{rules: [{ required: true, message: '请输入名称' }]}]"
              :getPopupContainer="(trigger) => {return trigger.parentElement}"
              showSearch
              placeholder="请输入名称"
              :showArrow="false"
              :filterOption="false"
              @search="fetchBankName"
              @change="onBankNameChange"
              :notFoundContent="fetching ? undefined : '暂无数据'"
            >
              <a-spin
                v-if="fetching"
                slot="notFoundContent"
                size="small"
              />
              <a-select-option
                v-for="(item, index) in bankNameList"
                :value="item.bankCode"
                :key="index"
              >{{item.bankName}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

import debounce from 'lodash/debounce'
export default {
  data() {
    this.lastFetchId = 0 // 只取最后一次结果
    this.fetchBankName = debounce(this.doSearchBankNameList, 800)
    return {
          fetching: false // 查询时的loading
          bankNameList: [], // 列表
             }
     }
  methods: {
  onBankNameChange (val) {
    
    },
    doSearchBankNameList (value) {
      this.bankNameList = []
      this.fetching = true
      this.lastFetchId += 1
      const fetchId = this.lastFetchId
      apiAction({
        name: value
      }).then((res) => {
        if (fetchId !== this.lastFetchId) { // for fetch callback order
          return
        }
        this.fetching = false
        this.bankNameList = res.data || []
      }).catch(() => {
        this.bankNameList = []
        this.fetching = false
      })
    }
    }
}