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('');
}
}
文章评论