Antd下拉選擇,自動(dòng)匹配功能的實(shí)現(xiàn)
我就廢話不多說了，大家還是直接看代碼吧~
<Select
placeholder="客戶名稱"
showSearch
optionFilterProp="children"http://自動(dòng)匹配輸入
onChange={this.selectChange}
>
{this.state.selectCustomer}
</Select>
補(bǔ)充知識(shí)：antd select如何支持既能輸入不存在的選項(xiàng)又能進(jìn)行下拉框選擇
1.Select必須具備onSearch,onBlur,onChange這三個(gè)屬性;
<Select
showSearch
value={this.state.value}
onSearch={…}
onBlur={…}
onChange={…}
{optionsFor}
2.在onSearch中使用回調(diào)，并設(shè)置
state {this.setState({ 'newState':val })}} onBlur={} onChange={...} > {optionsFor}
3.onChange設(shè)置回調(diào)
{this.setState({ 'newState':val })}} onBlur={} onChange={this.handleChange} > {optionsFor}
4.onBlur中利用三目判斷，并返回輸入的值
{this.setState({ 'newState':val })}} onBlur={()=>{ return this.state.newState?this.handleChange:null }} onChange={this.handleChange} > {optionsFor}
5.最后一步，也是最重要的，必須利用delete命令移除在state中設(shè)置的newState；
let finalState = this.state; delete newState['newState]; this.setState({finalState})
以上這篇Antd下拉選擇,自動(dòng)匹配功能的實(shí)現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vxe-table vue table 表格組件功能
- antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作
- Antd的table組件表格的序號自增操作
- antd-DatePicker組件獲取時(shí)間值,及相關(guān)設(shè)置方式
- Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作
- 解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問題
- 在react-antd中彈出層form內(nèi)容傳遞給父組件的操作
- 在react項(xiàng)目中使用antd的form組件,動(dòng)態(tài)設(shè)置input框的值
- 解決Antd Table組件表頭不對齊的問題
相關(guān)文章
Vue2過渡標(biāo)簽transition使用動(dòng)畫方式
這篇文章主要介紹了Vue2過渡標(biāo)簽transition使用動(dòng)畫方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面
這篇文章主要介紹了vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，所以本文將從各方面對Vue.js的組件開發(fā)做一個(gè)深入介紹。有需要的朋友們可以參考借鑒。2016-10-10
Vue中的methods、watch、computed的區(qū)別
這篇文章主要介紹了Vue中的methods、watch、computed的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實(shí)現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧2018-11-11
快速解決Vue項(xiàng)目在IE瀏覽器中顯示空白的問題
今天小編就為大家分享一篇快速解決Vue項(xiàng)目在IE瀏覽器中顯示空白的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了elementUI組件el-dropdown的一些坑，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例
今天小編大家分享一篇vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3項(xiàng)目pc端瀏覽器樣式正常但移動(dòng)端部分樣式失效問題的解決方法
這篇文章主要介紹了Vue3項(xiàng)目pc端瀏覽器樣式正常但移動(dòng)端部分樣式失效問題的解決方法,文中通過圖文講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-07-07
本文主要介紹了常見路由跳轉(zhuǎn)的幾種方式，主要介紹了四種常見方式，具有一定的參考價(jià)值，感興趣的可以了解一下2023-09-09