一、Antd-Select提供几种类型

  1. 最基础版只提供下拉功能的选择器

  2. 带搜索功能的下拉选择器

  3. 可多选的下拉选择器

  4. 可搜索、可多选、可随意输入内容的tag下拉选择器(支持自动分词)

  5. 多级联动下拉选择器

  6. 搜索远程数据下拉框

二、一些潜在用法

如果Select.Option选项的数量特别大:2k、3k...

假设请求数据时间我们都解决好了,信心满满地准备把数据填充到``后下班!过会你会发现有多绝望..

这下拉框加载了10s还没出来!?这时候先想着去antd文档上找解决方法,无果后百度、SF、google....因为antd每次都会重新渲染<Select.Option>,所以要降低卡顿时间,唯一办法就是减少渲染的数量

可以来体验一下:《antd-Select加载2k条数据演示》

发现问的人倒挺多,真正解决的回答没见到几个(我还没找到..)

有的劝着放弃吧,加了那么多用户也不会看(确实如此),改做成一个搜索下拉框.稍微执拗一点的继续挣扎,终于找到了一个能优化加载速度的插件《react-select-fast-filter-options》

然后过会又发现,搜索功能肯定也需要的呀!总不能让用户翻那2000条数据.不然可能半夜还在被投诉.

带着最后一点希望,找了一下github上antd的Issues,里面给的回答倒是挺有启发的,但是还是没有正确的解决办法.《ant-design:Issues》

于是就自己设计了一个,新手代码请见谅,希望对你有帮助.

//render
const { optionsData } = this.state; <Select style={{ width: 200 }}
showSearch
onChange={this.handleSecChange}
placeholder="请输入/选择xxx"
onSearch={this.handleSerach}
>
{
optionsData.length && optionsData.map( (item, index) => (
<Select.Option key={index} value={item}>{item}</Select.Option>)
)
}
</Select>
//搜索Value值改变触发回调函数
handleSerach(e){
let { clusterValue } = this.state;
let that = this;
//类似函数节流
setTimeout(function(){
that.loadOption(clusterValue, e)
},300) } loadOption(clusterValue, keyWords){
const { options } = this.props.data; //获得2k条数据
let newOptionsData = [];
let arrData = options[clusterValue];
if(Object.keys(options).length){
let len;
if(arrData.length > 100) len = 100;
else len = arrData.length; //初始化
if(keyWords == ''){
for(var i=0;i<len;i++){
newOptionsData.push(arrData[i])
}
} //用户搜索
else{
newOptionsData = [];
for(var j = 0; j < arrData.length; j++){
if(arrData[j].indexOf(keyWords) != -1){
newOptionsData.push(arrData[j]);
if(newOptionsData.length > 100) break;
}
}
}
} // return newOptionsData
this.setState({
optionsData: newOptionsData
})
}
  • handleSearch函数添加定时是为了解决每次输入都立刻请求,导致卡顿;用户输入完成后再统一查找,虽然会导致在搜索的时候增加300ms空白期,但是比用户输入卡顿要好
  • 把渲染数量控制在100条内,防止卡顿,一般用户查找一个数据,也会输入得比较完整,不可能会在100条内查找。
  • 区分初始化和搜索两个不同情况,用户刚进入界面的时候,并没有关键字搜索,所以这时候要初始化前100条内容给用户,当然你也可以按照一定的条件渲染数据给用户,只要保证合理数量以内即可
  • 因为我的数据是多级联动的
options:{
'key': [xxx,xxx1,xxx2...],
'key1': [xxx,xxx1,xxx2...]
}

所以我的写法是options[xxx],然后遍历相应的数组即可

当然这仅仅是一种思路,更好的实现方法有很多!希望这能成为你的方法的一个垫脚石

有时候多看看官方文档真的很有帮助.学习的不仅仅是它的方法,还有它的思路。如果遇到它的一些特殊语法(语法糖),也可以到ant-design-pro里查阅

《ant-design-pro》

Antd-Select组件的深入用法的更多相关文章

  1. Antd Select组件结合使用出现must set key for <rc-animate> children问题

    一.以下情况可能导致错误发生 出现这个问题的首要条件是因为Select的mode 设置成multiple or tags 1. Select的defaultValue使用了空字符串 例如: const ...

  2. elementUI下拉框select组件change事件用法

    <el-select-custom clearable collapse-tags v-model="searchForm.cardTypeList" @change=&qu ...

  3. 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法

    先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...

  4. antd Select进阶功能 动态更新、函数防抖

    一.动态更新Options Antd Select自带的搜索功能很多时候需要结合后端的接口,输入一个关键字的时候会自动更新选择器的选项. 下面列一些注意点 基础实现 选择器选项必须和每次更新的数据挂钩 ...

  5. Mybatis 系列8-结合源码解析select、resultMap的用法

    [Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...

  6. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. 改变select组件的option选中状态的快捷方法

    以前我都是在<option>标签处通过判断value是否与其中一个相同然后输出selected="selected"来处理的,今天发现可以直接能过Js改变<sel ...

  8. select组件2

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. select组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  10. mysql SELECT FOUND_ROWS()与COUNT(*)用法区别

    在mysql中 FOUND_ROWS()与COUNT(*)都可以统计记录,如果都一样为什么会有两个这样的函数呢,下面我来介绍SELECT FOUND_ROWS()与COUNT(*)用法区别   SEL ...

随机推荐

  1. Step6:SQL Server 数据变更时间戳(timestamp)在复制中的运用

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 方案(Solution) 方案一(Solution One) 方案二(Solution Two ...

  2. Oracle12.2中新增的分区功能

    Oracle 12.2已经发布一段时间,公网上也可以下载试用.针对12.2,partitioning(分区)也有了不少增强. 自动列表分区 多字段列表分区 只读分区 分区维护时允许过滤 在线转换非分区 ...

  3. jquery的$post方法不发送空数组的解决办法

    问题:jquery里的ajax在提交post请求时,如果数据里有一个空数组,则这个空数组不会提交上去 技术上的解决办法如下: 源代码: var params = { type : , ids:[] } ...

  4. php定界符<<<EOF讲解

    Heredoc技术.可用来输出大段的html和javascript脚本 1.PHP定界符的作用就是按照原样,包括换行格式什么的,输出在其内部的东西: 2.在PHP定界符中的任何特殊字符都不需要转义:  ...

  5. MySQL 常用使用语句

    1)批量删除表 Select CONCAT( 'drop table ', table_name, ';' ) FROM information_schema.tables Where table_n ...

  6. 【Python045-魔法方法:属性访问】

    一.属性的几种访问方式 1.类.属性名 >>> class C: def __init__(self): self.x = 'X-man' >>> c = C() ...

  7. FireMonkey 源码学习(1)

    FireMonkey采用了与VCL不同的机制,很多基础类已经重新编写了,好在一如既往地提供了源代码,故此有机会学习一下. 一.图形引擎 FireMonkey采用了纯图形化技术解决可视化控件,而不是使用 ...

  8. Docker 入门指南——资源工具篇

    好工具 dive wagoodman/dive A tool for exploring each layer in a docker image 参考 用 Dive 看 Docker Image 裡 ...

  9. 如何合并ts文件?

    答: 使用ffmpeg工具,使用方法如下: ffmpeg -i <m3u8 file name> <output file name> 注意:要先将m3u8文件中描述的ts文件 ...

  10. 今日头条 CEO 张一鸣:面试了 2000 个年轻人,混得好的都有这 5 种特质

    https://blog.csdn.net/qq_35246620/article/details/72801285 博主说:多了解了解总是好的. 正文 张一鸣算是 80 后中绝对的佼佼者.1983 ...