脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Antd下拉选择自动匹配

Antd下拉选择,自动匹配功能的实现

 更新时间：2020年10月24日 10:48:17   作者：zerocher  
这篇文章主要介绍了Antd下拉选择,自动匹配功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

我就废话不多说了，大家还是直接看代码吧~

<Select
 placeholder="客户名称"
 showSearch
 optionFilterProp="children"//自动匹配输入
 onChange={this.selectChange}
>
 {this.state.selectCustomer}
</Select>

补充知识：antd select如何支持既能输入不存在的选项又能进行下拉框选择

1.Select必须具备onSearch,onBlur,onChange这三个属性;

<Select
showSearch
value={this.state.value}
onSearch={…}
onBlur={…}
onChange={…}

{optionsFor}

2.在onSearch中使用回调，并设置

state {this.setState({ 'newState':val })}} onBlur={} onChange={...} > {optionsFor}

3.onChange设置回调

{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中设置的newState；

let finalState = this.state; delete newState['newState]; this.setState({finalState})

以上这篇Antd下拉选择,自动匹配功能的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • ant design pro中可控的筛选和排序实例

    ant design pro中可控的筛选和排序实例

    这篇文章主要介绍了ant design pro中可控的筛选和排序实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue项目在env文件中设置的变量无效问题及解决

    vue项目在env文件中设置的变量无效问题及解决

    这篇文章主要介绍了vue项目在env文件中设置的变量无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vant如何实现Collapse折叠面板标题自定义

    vant如何实现Collapse折叠面板标题自定义

    这篇文章主要介绍了vant如何实现Collapse折叠面板标题自定义，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 手把手教你Vue3 按需引入 Echarts的过程(收藏)

    手把手教你Vue3 按需引入 Echarts的过程(收藏)

    新项目采用 Vue3 作为前端项目框架,避免不了要使用 echarts,但是在使用的时候,出现了与 Vue2 使用不一样的地方,所以特别记下来,希望给到有需要的同学一些帮助
    2023-10-10
  • 基于Vue实现页面全屏封装的详细步骤

    基于Vue实现页面全屏封装的详细步骤

    众所周知：目前可视化大屏,视频播放等常见功能都需要用到全屏,本文将使用两种技术实现全屏功能的封装,让不同技术栈的同学都可以轻松掌握,好了,让我们来实现一个既兼容性强又易于管理的全屏功能组件吧,需要的朋友可以参考下
    2024-08-08
  • Vue和React组件之间的传值方式详解

    Vue和React组件之间的传值方式详解

    这篇文章主要介绍了Vue和React组件之间的传值方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 如何在vue中使用pdfjs预览pdf文件

    如何在vue中使用pdfjs预览pdf文件

    本文主要讲解了如何在vue中使用pdfjs预览pdf文件，这样的优势是无须让用户安装专门的软件即可实现预览，下面就看看如何实现这个需求
    2021-06-06
  • element中drawer模板的实现

    element中drawer模板的实现

    本文主要介绍了element中drawer模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 解决Antd输入框卡顿问题以及Pubsub.js的使用方式

    解决Antd输入框卡顿问题以及Pubsub.js的使用方式

    这篇文章主要介绍了解决Antd输入框卡顿问题以及Pubsub.js的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Vuejs第十三篇之组件——杂项

    Vuejs第十三篇之组件——杂项

    组件（Component）是 Vue.js 最强大的功能之一。本文重点给大家介绍vuejs组件相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-09-09

最新评论