antd AutoComplete组件自定义下拉选项，处理搜索接口返回值不是最新搜索关键字的取值问题

1. AutoComplete组件：option-label-prop回填选项内容；slot="dataSource"插槽自定义下拉框

<a-auto-complete
   	style="width: 200px"
    placeholder="输入搜索关键字"
    option-label-prop="value"
    @select="handleSelect"
    @search="handleSearch"
    :defaultActiveFirstOption="false"
    :allowClear="true">
    <a-spin v-if="fetching" class="auto-spin" slot="notFoundContent" size="small" />
    <template slot="dataSource">
      <a-select-option v-for="(item, index) in list" :key="index" :value="item.name">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col>{{ item.number }}</a-col>
          <a-col>{{ item.name }}</a-col>
        </a-row>
      </a-select-option>
    </template>
</a-auto-complete>

2. 搜索接口返回值取最新关键字取值结果，取值时，传入一个随机数做标记，当返回的随机数与当前随机数相同时，即是最新关键字取值结果

methods: {
    // 特定范围随机数
    genRandom (min, max) {
      return (Math.random() * (max - min + 1) | 0) + min
    },
    handleSearch (val) {
      this.fetching = false
      this.list = []
      this.randomId = this.genRandom(1, 9999) // 防止接口返回慢，数据覆盖
      this.$nextTick(function () {
        if (val !== '') {
          this.fetching = true
          const _this = this
          setTimeout(function () {
            const arr = [
              { id: '1', name: '未', number: '5' },
              { id: '2', name: '中', number: '9' },
              { id: '3', name: '赤', number: '7' },
              { id: '4', name: '海', number: '9' }
            ]
            _this.list = arr
            _this.fetching = false
          }, 1000)
        }
      })
    },
    handleSelect (val, option) {
      console.log(val, option, 1000)
    }
}