iView Select标签搜索功能数据不匹配问题解决

iView Select标签在使用搜索功能时 , 有时候会出现数组里有数据但是并未展示的问题.

类似这种

 <Select
    filterable
    remote
    :remote-method="searchTeamHeader"
    :loading="searchLoading"
    @on-query-change='searchQueryChange'
    @on-change='searchSelectChange'>
    <Option v-for="option in teamHeadList" :value="option.id + ',' + queryText" :key="option.id" :label='option.name'>
        <div class="option-div" style="width:400px;">{{option.name}}</div>
        <div class="option-div" style="width:80px;">{{option.contact}}</div>
        <div class="option-div">{{option.contactMobile}}</div>
    </Option>
</Select>

原因如下:

:vlaue会自动进行数据过滤, 官方有提到

image.png

也就是说绑定的:value中数据必须包含你所输入的搜索内容, 不然会被过滤掉, 解决方法就是取消这种过滤, 但是没有直接取消入口, 所以可以采用将输入的内容绑定到:value中, 保证一定存在 这样就不会过滤了, 如图中的queryText 可以在@on-query-change 方法中把输入的内容赋值给它