Antd-Select组件的深入用法
一、Antd-Select提供几种类型
最基础版只提供下拉功能的选择器
带搜索功能的下拉选择器
可多选的下拉选择器
可搜索、可多选、可随意输入内容的tag下拉选择器(支持自动分词)
多级联动下拉选择器
搜索远程数据下拉框
二、一些潜在用法
如果Select.Option选项的数量特别大:2k、3k...
假设请求数据时间我们都解决好了,信心满满地准备把数据填充到<Select.Option>
后下班!过会你会发现有多绝望..
这下拉框加载了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 }} showSearchonChange={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 newOptionsDatathis.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》
转载于:https://www.cnblogs.com/soyxiaobi/p/9726838.html
Antd-Select组件的深入用法相关推荐
- antdpro 中 使用 antd select 组件,defaultValue 与 value 使用问题
背景 简而言之,就是业务需求中虽然使用了 ProTable,但是表格列中有处理人,处理状态等需要下拉框显示的,于是用了 render 方法,结合 antd select 组件来实现. 原本是打算用 P ...
- antd Select组件 和 Dropdown组件 踩坑·记
目录 一.踩坑记 1.Select 组件需要显示 value 但传递给后台的是 key 2.Select 组件或 Dropdown 组件下拉框随页面上下滑动的问题 3.Select 组件滑动下拉框数据 ...
- antd Select组件单选框自定义输入和可选择输入功能实现
函数组件中的用法 const [searchValue, setSearchValue] = useState(''); const onSearch = curentValu ...
- 支持大数据渲染下拉列表组件开发 SuperSelect(基于antd Select)
功能简介 antd 的 Select 组件不支持大数据量的下拉列表渲染,下拉列表数量太多会出现性能问题, SuperSelect 基于 antd 封装实现,替换原组件下拉列表,只渲染几十条列表数据,随 ...
- antd Select 使用动态数据渲染选择项
2021年 11月30 日 晴 今天的天气比较好,星期天,也没有出去,最近在学习react,我也不知道学习这个有什么样的作用,其实我现在的工作是比较偏重于后端以及服务器相关的东西,但是总是想做个比较好 ...
- antd 函数组件_react函数组件中引用antd<Form/>组件demo
```xml import React, { forwardRef, useEffect } from 'react'; import { Input, Select, Row, Col, Butto ...
- Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格 展示行列数据. 何时使用 当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用 指定表格的 ...
- 关于antd Select 限制选择个数的解决方案
关于antd Select 限制选择个数的解决方案 参考文章: (1)关于antd Select 限制选择个数的解决方案 (2)https://www.cnblogs.com/weblinda/p/9 ...
- elementui select组件选中后无法自动刷新更新值渲染到页面中
2019独角兽企业重金招聘Python工程师标准>>> elementui select更改选中值后,无法渲染到页面中? 在select组件中添加了@visible-change=& ...
- 组件三层_Angular 练级之旅(8)-Zorro Select组件的实现和进阶
很久没写相关的文章,正好前两天把抄来的Select组件重写了一下,简化了一些逻辑. 先看下zorro 中select组件的一个目录结构 zorro将select组件分成了 三大块 Input / 选择 ...
最新文章
- 离线安装python第三方库的实用方法:解决公司内网,服务器/电脑不能上网却需要安装python三方库问题(上:Windows环境中)
- python学到什么程度可以写爬虫-月薪2万的爬虫工程师,Python需要学到什么程度?...
- 学生选课数据库SQL语句练习题——成绩表
- MyBatis 实际使用案例-Mapper.xml 映射配置文件【重点】
- linux安装mysql5.7.18_Linux下安装mysql5.7.18版本步骤
- js如何获取服务器端时间?
- fopen php 乱码,如何解决php fgets读取文件乱码的问题
- python requests post请求_Python“requests”模块中的POST请求无法正常工作
- JAVA 基础 / 第八课:面向对象 / JAVA类的方法与实例方法
- 【转】Windows10彻底关闭休眠功能
- 2018——广东工业大学校赛题解
- 公安人员审问四名窃贼嫌疑犯
- Java经典算法题目(兔子题)及题目分析
- 广州穗雅医院健康汇:为什么口腔溃疡会反反复复?
- 是谁在撩动着我的服务器
- STM32F系列ARM Cortex-M3核微控制器基础之系统时钟一
- java 8函数式编程pdf 百度云盘链接
- QQ群的一“亲切”菜单
- RNA-seq 详细教程: `DESeq2` 差异表达分析(7)
- 用Carbide.c++开发Symbian入门
热门文章
- JAVA记录-Servlet介绍
- Linux网络流量实时监控ifstat iftop命令详解
- struts+swfupload实现批量图片上传(上):swfupload
- struts中多个模块时,使用多个struts-config.xml文件之间时如何切换的!
- 不能启动的问题 社区版安装后_CentOS7下安装docker(亲测+完整)
- 用js实现导航栏shoufang效果_【读者投稿】用Github+docsify,我花了半天就搭好了个人博客...
- matlab 大括号
- java 快速构建ssm项目_SSM快速搭建
- 少儿编程150讲轻松学Scratch(七)-Scratch学习中需要注意的地方
- 订单生产计划表范本_工厂生产管理为什么需要ERP软件?