我就廢話不多說了，大家還是直接看代碼吧~

placeholder="客戶名稱"

showSearch

optionFilterProp="children"//自動匹配輸入

onChange={this.selectChange}

>

{this.state.selectCustomer}

補充知識：antd select如何支持既能輸入不存在的選項又能進行下拉框選擇

1.Select必須具備onSearch,onBlur,onChange這三個屬性;

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下拉選擇,自動匹配功能的實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持我們。

時間： 2020-10-22

總結(jié)

以上是生活随笔為你收集整理的antd vue 多个下拉 联动_Antd下拉选择,自动匹配功能的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。