關於antd中select搜索框改變搜索值的問題
Ant Design of Vue中select搜索框改變搜索值
問題和原因
在文檔裡有select的搜索demo,但是通常用到select的時候展示的是name,而獲得的是id,同樣在搜索的時候用戶一般隻用搜索name,而在antd中加上show-search後發現是按id搜索,而不是name。
<a-form-item label="負責人" name="principalUserId"> <a-select v-model:value="detailState.principalUserId" show-search> <a-select-option v-for="item in principalList" :key="item.id" :label="item.name" > {{ item.name }} </a-select-option> </a-select> </a-form-item>
principalList.value = [ { id: 1, value: 1, name: "張三", }, { id: 2, value: 2, name: "李四", }, { id: 3, value: 3, name: "王五", }, ];
Ant Design of Vue
默認用的是value
進行搜索。
修改
在antd中<a-select>
上增加 optionFilterProp="label"
,<a-select-option>
上增加label
字段即可。
<a-select v-model:value="detailState.principalUserId" show-search optionFilterProp="label" > <a-select-option v-for="item in principalList" :key="item.id" :value="item.id" :label="item.name" > {{ item.name }} </a-select-option> </a-select>
PS: element中的select搜索
而在element
中的select中加上搜索,直接在<el-select>
加上filterable
即可,並且默認是搜索label
。
<el-select v-model="value" placeholder="請選擇" @change="selectValue" filterable > <el-option v-for="item in options" :key="item.id" :label="item.userName" :value="item.id" ></el-option> </el-select>
antd select等組件可搜索問題
Select 添加 showSearch 屬性可以實現搜索功能,但是這個搜索是搜的Select的value值的,但是value值在頁面上是看不到的
一般用戶搜索的是下拉框顯示看到的內容,所以需要加上 optionFilterProp=“children” 這個屬性就可以搜索看到的內容瞭
<Select showSearch optionFilterProp="children" > {options.map((item,index)=><Option key={index} value={item.id}{item.name}</Option>)} </Select>
總結
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue設置select下拉框的默認選項詳解(select空白bug解決)
- element-ui之解決select無法回顯的問題
- Ant Design of Vue select框獲取key和name的問題
- 關於element-ui select 下拉框位置錯亂問題解決
- vue+element開發使用el-select不能回顯的處理方案