Select 選擇器進行搜尋

<template>
    <div>
        <a-form-item label="分類:">
            <a-select
                placeholder="請選擇"
                style="width: 320px"
                v-model:value="formState.sortValue"
                :showSearch="true"
            >
                <a-select-option v-for="(item, index) in listArr" :key="index">
                    {{ item.name }}
                </a-select-option>
            </a-select>
        </a-form-item>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
    setup() {
        let formState = reactive({
            sortValue: '',
        })
        let listArr = [
            { name: '華為', value: '001' },
            { name: '小米', value: '002' },
            { name: 'oppo', value: '003' },
        ]
        return {
            listArr,
            formState,
        }
    },
})
</script>
 

發現搜尋失敗的解決辦法

在 <a-select>上新增
optionFilterProp="label"
他表示搜尋時過濾對應的 option 屬性，不支援 children
:label="item.name"  

最終程式碼為

 <a-form-item label="分類:">
	<a-select
		placeholder="請選擇"
		style="width: 320px"
		v-model:value="formState.sortValue"
		:showSearch="true"
		optionFilterProp="label"
	>
		<a-select-option
			:label="item.name"
			v-for="(item, index) in listArr"
			:key="index"
		>
			{{ item.name }}
		</a-select-option>
	</a-select>
</a-form-item>
 

處理Select滾動時不跟隨與select框分離

使用getPopupContainer函式 
選單渲染父節點。
預設渲染到 body 上，
如果你遇到選單滾動定位問題，試試修改為滾動的區域，
並相對其定位。

解決辦法

<a-select
	placeholder="請選擇"
	style="width: 320px"
	v-model:value="formState.sortValue"
	:getPopupContainer="
		triggerNode => {
			return triggerNode.parentNode || document.body
		}
	"
>
	<a-select-option
		v-for="(item, index) in listArr"
		:key="index"
	>
		{{ item.name }}
	</a-select-option>
</a-select>
 

值型別錯誤回填失敗

需要的是字串型別，
但是返回來的是一個數字型別導致回填失敗
描述：華為的value='10'字串10
但是返回來的是一個數字型別的10
這樣回填會出現數字10,而不是回填華為
將數字型別更改為字串型別就可以解決

型別錯誤的小例子

<template>
    <div>
        <a-form-item label="分類:">
            <a-select
                placeholder="請選擇"
                style="width: 320px"
                v-model:value="formState.sortValue"
            >
                <a-select-option
                    :label="item.name"
                    v-for="(item, index) in listArr"
                    :key="index"
                >
                    {{ item.name }}
                </a-select-option>
            </a-select>
        </a-form-item>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
    setup() {
        let formState: any = reactive({
            sortValue: 10, 
        })
        let listArr = [
            { name: '華為', value: '10' },
            { name: '小米', value: '12' },
            { name: 'oppo', value: '13' },
        ]
        return {
            listArr,
            formState,
        }
    },
})
</script>

資料不存在出現的問題

有些時候會出現這樣的情況,
返回來的資料值在下拉框中匹配不到，
此時就會回填返回來的值，但是我們並不需要出現這樣的情況
我們期望匹配不到回填空

解決辦法：將返回來的值與下拉框中的值進行匹配。
如果查詢不到，直接回填空
這種方式需要在每一個使用了下拉框中的頁面寫方法
很不友好，最好的是從底層處理。給原始碼一個配置項

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！