解决iview(ViewUI)下选择器select远程搜索中默认或已输入关键词后再删除无法复位问题

2022-07-31 1226点热度 0人点赞 0条评论

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('');
    }
}

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论