Ant Design of Vue select加載遠程數據完善方案

前言

本人參加的一個項目中，使用了Ant Design of Vue的select控件，為了使控件更加具有響應性（后台大概有1w條左右數據），所以使用了加載遠程數據方式。而正是這個遠程加載方式及控件的search功能，使自己遇到了一個坑，直到費了點力氣才填坑完畢。

過程如下：

控件聲明：

 <a-select
     class="select-box"
     mode="multiple"
     size="small"
     placeholder="零件"
     v-model="params.partNumbers"
     :filterOption="false"
     @search="getPartList"
     showSearch
     allowClear>
     <a-select-option v-for="(item, index) in partsList" :key="index" :value="item">
        {{ item }}
     </a-select-option>
</a-select>

 getPartList(val){
           partApi.getPartList(val).then(res => {
              if(res.flag){
                    this.partsList = res.data;
                }
             })
        },

故障現象

然后運行頁面，發現控件出現一個不良表現，即：輸入一個具體的選項值后，選中這個選項，再將光標焦點落到這個控件時，發現這個下拉框的下拉選項只有一個，如下圖所示：

剛開始，利用@focus進行響應，發現可以，但是由於多次調用展示，造成控件出現閃爍，不理想。如何解決呢？后來想到了問題出現的原因：

原因分析

因為選中事件后，select控件的數據源其實只有這一個選項了，而再次點擊時，不會觸發search事件，也就不會再次加載數據列表，所以只會顯示這個選項。知道了原因，解決的辦法很簡單，就是在@selected事件中，重置控件數據源，即添加控件事件綁定：

 @select="getPartList('')"

測試與總結

控件事件綁定完成后，進行測試，完美解決！