下拉框无法选择、卡住、二次搜索不生效问题处理【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 = ""  清除选中值即可！