iView下的Select选择器,使用了可搜索和远程搜索,示例如下:
<Select v-model="model13" filterable :remote-method="remoteMethod1" :loading="loading1"> <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option> </Select>
我们在select下输入关键词后,会调用remoteMethod1方法
remoteMethod1 (query) { console.log('query: ' + query); // 这里根据query关键词,查询后台api,返回需要展示的备选option,如果query为空,也可以查询后台API,给出默认的搜索建议 this.options1 = [{value: 'some value', label: 'some label'}]; },
但是发现一个问题,默认没有关键词的时候,或者按删除把select中的关键词清空后,是不会调用remoteMethod1这个方法的(只有query有内容才能触发这个方法),我们希望query为空的时候也能请求后台API。
解决办法
- 在create方法中,请求一次remoteMethod1方法,给出默认的搜索建议
- 监听Select的on-query-change方法,如果监听到query的内容为空,请求remoteMethod1方法即可。
<Select v-model="model13" filterable :remote-method="remoteMethod1" @on-query-change="queryChanged" :loading="loading1"> <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option> </Select>
实现queryChanged方法
queryChangedUseObject: function(value) { if(!value) { this.remoteMethod1(''); } }
文章评论