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>
           

1. 搜尋接口傳回值取最新關鍵字取值結果，取值時，傳入一個随機數做标記，當傳回的随機數與目前随機數相同時，即是最新關鍵字取值結果

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)
    }
}