做接口的網(wǎng)站廣告?zhèn)髅焦窘?jīng)營(yíng)范圍
a-auto-complete 請(qǐng)求后端數(shù)據(jù)做模糊查詢,解決下拉框選擇選不上,不回顯的問題
記錄一個(gè)a-auto-complete卡bug卡了兩天,找不到哪里的問題下拉框選擇選不上,不回顯,最后終于解決了。
我還對(duì)下拉框顯示的內(nèi)容做了小調(diào)整。
直接看代碼吧。
<a-auto-complete v-model:value="inputValue" :options="personOptions" style="width: 300px" placeholder="請(qǐng)輸入姓名"@select="onSelect" @search="onSearch"><template #option="item"><span>{{ item.name }}</span><br /><span style="color:#1890ff">{{ item.licenseNumber }}</span></template></a-auto-complete>..................
//input值
const inputValue = ref('');
//下拉框option
const personOptions = ref([]);
//輸入的事件
const onSearch = searchText => {
//發(fā)送請(qǐng)求獲取option數(shù)組const param = {name: searchText}relationApi.getPerson(param).then((res) => {///卡bug的地方就在這,請(qǐng)求接口返回的數(shù)據(jù)了沒有value這個(gè)字段,所以要給option數(shù)組里的對(duì)象添加value屬性///option數(shù)組里需要name和value屬性!const a = res.map(item => {return {...item,value: item.name}})personOptions.value = !searchText? []: a;}).finally(() => {})
};
//選擇下拉框的事件
const onSelect = (value, option) => {
/value是下拉框選中的值,option是選中的所有屬性,可以取你自己想要的值,我這里取的是option.licenseNumbe,然后自己進(jìn)行后續(xù)操作。relationApi.getPersonDetial({ licenseNumber: option.licenseNumber }).then((res) => {if (res.body) {treeData.value = res.body} else {message.warning('暫無數(shù)據(jù)!')treeData.value = []}initTree();}).finally(() => {})
};