背景：使用iviewi-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 = "" 清除選中值即可！