iView Select標簽在使用搜索功能時 , 有時候會出現(xiàn)數(shù)組里有數(shù)據(jù)但是并未展示的問題.
類似這種
<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會自動進行數(shù)據(jù)過濾, 官方有提到
image.png
也就是說綁定的:value中數(shù)據(jù)必須包含你所輸入的搜索內(nèi)容, 不然會被過濾掉, 解決方法就是取消這種過濾, 但是沒有直接取消入口, 所以可以采用將輸入的內(nèi)容綁定到:value中, 保證一定存在 這樣就不會過濾了, 如圖中的queryText 可以在@on-query-change 方法中把輸入的內(nèi)容賦值給它
