ant-design select组件 （带有远程搜索，节流控

  <a-form
  class="form-inline-wrap"
  @submit="handleSubmit"
  :form="submitForm"
>
  <a-row>
    <a-col :span="8" :offset="6">
      <a-form-item
        label='名称:'
      >
        <a-select
          v-decorator="['name',{rules: [{ required: true, message: '请输入名称' }]}]"
          :getPopupContainer="(trigger) => {return trigger.parentElement}"
          showSearch
          placeholder="请输入名称"
          :showArrow="false"
          :filterOption="false"
          @search="fetchName"
          @change="onNameChange"
          :notFoundContent="fetching ? undefined : '暂无数据'"
        >
          <a-spin
            v-if="fetching"
            slot="notFoundContent"
            size="small"
          />
          <a-select-option
            v-for="(item, index) in NameList"
            :value="item.name"
            :key="index"
          >{{item.Name}}</a-select-option>
        </a-select>
      </a-form-item>
    </a-col>
  </a-row>
  
  <a-row class="clear">
    <a-col :span="8" :offset="6">
      <a-form-item class="no-label">
        <div class="btns clear">
          <a-button
            class="btn btn-shadow"
            type='primary'
            htmlType="submit"
          >提交</a-button>
        </div>
      </a-form-item>
    </a-col>
  </a-row>

</a-form>

<script>
  import debounce from 'lodash/debounce'
  export default {
  data() {
    this.lastFetchId = 0 // 只取最后一次结果
    this.fetchName = debounce(this.doSearchNameList, 800)

    return {
      nameList: [],
      fetching: false // 查询时的loading
    }
  },
  beforeCreate () {
    this.submitForm = this.$form.createForm(this)
  },
  methods: {
    onNameChange (val) {
    },
    doSearchNameList (value) {
      this.nameList = []
      this.fetching = true
      this.lastFetchId += 1
      const fetchId = this.lastFetchId
      // 请求接口
      getNameList({
        name: value
      }).then((res) => {
        if (fetchId !== this.lastFetchId) { // for fetch callback order
          return
        }
        this.fetching = false
        this.nameList = res.data || []
      }).catch(() => {
        this.nameList = []
        this.fetching = false
      })
    }
  }
}

</script>