下拉框無法選擇、卡住、二次搜索不生效問題處理【iview、select】

　　背景：使用iview i-select，option數據使用的是自定義數據，出現無法二次搜索、選項卡死的問題。

 

　　原因：經過一番排查，發現由於自定義數據量過大導致頁面加載卡死。

 

　　解決方式（此方式不局限框架，根據思路解決問題！）：使用iview的遠程搜索，可以理解為緩沖加載，讓數據自然過渡；遠程搜索解決數據問題，無法二次搜索是因為選中數據沒有清空，數據沒有得到渲染，調用清空選中數據即可。

　　

　　代碼及詳解：

　　iview官網select文檔

            <Form-item label="基本戶銀行編碼" prop="basicacctBankcode" style="display:inline-block;width: 50%;">
                <i-select ref="select" @on-center="changeSelect" v-model="openAcct.basicacctBankcode" placeholder="請輸入銀行名稱搜索" remote :remote-method="remoteMethod" :loading="loading" http://v1.iviewui.com/components/select>
                    <i-option v-for="item in bankCodeList2" :value="item.code" :key="item.code">{{item.name}}</i-option>
                </i-select>
            </Form-item>

　　filterable：是否支持搜索；

　　remote：是否為遠程搜索；

　　remote-method：遠程搜索方法；

　　loading：加載中；

　　@on-center：選中事件，添加這個觸發清空變量操作；

　　ref：vue中綁定，用於操作DOM元素。

 

　　效果：

　　

 

 

 　　JS代碼片段：

　　

data:{
  //銀行編碼遠程搜索數據集
        bankCodeList:[...],
  //銀行編碼本地數據集
        bankCodeList2: [],
  //是否加載
        loading: false
},

methods: {
  //動態獲取銀行編碼
        remoteMethod:function (query) {
            if(query !== ''){
                vm.loading = true;
                //緩沖加載
                setTimeout(() =>{
                    vm.loading = false;
                    let list = vm.bankCodeList;
                    //循環賦值
                    for(let i=0;i<list.length;i++){
                        if(list[i].name.indexOf(query)){
                            vm.bankCodeList2.push([i]);
                        }
                    }
                    vm.bankCodeList2 = list.filter(item =>(item.name.indexOf(query)>-1));
                },200);

            }
        },
        //清除選中下拉的緩存
        changeSelect: function () {
            //清空選中
            this.$refs.select.query = '';
        }  
}

　　　　

　　總結：

　　　　select下拉框數據量過大，本地加載卡死，利用遠程懶加載把數據賦值進去，完成數據過渡解決卡死問題。

　　　　無法搜索和選中是因為下拉框選中的值沒有被清空，調用方法

　　　　　this.$refs.select.setQuery(null)    或    this.$refs.select.query = ""  清除選中值即可！