antd-Vue 3.X版本 a-select使用 實現下拉展示數據處理、搜索、自定義參數、分頁的需求
一。獲取的數據可能不是 value、label 這種出參,所以使用 :field-names="{ label: 'name', value: 'id', options: 'children' }" 自定義參數,在使用過程中顯示的label 并不單純的是name可能是name拼接別的參數名,這時候的寫法是
<a-select
v-model:value="value"
style="width: 120px"
:field-names="{ label: 'name', value: 'id', options: 'children' }"
>
<a-select-option v-for="item in list" :key="item.id" :value="item.id">{{item.name+item.number}}</a-select-option>
</a-select>
這樣寫我本地不顯示下拉的數據,沒找到為啥 初步判斷是label數據有問題
修改之后的寫發如下,解決了問題:
<a-select
v-model:value="value"
style="width: 120px"
:options="list.map(item=>{ return {id:item.id,name:item.id+item.number}})"
:field-names="{ label: 'name', value: 'id', options: 'children' }"
>
</a-select>
前端添加搜索添加兩個設置:
show-search //添加搜索
optionFilterProp='name' //搜索的內容
二。實現搜索、下拉分頁的功能

浙公網安備 33010602011771號