antd的select下拉框因为数据量太大造成卡顿的解决方式_a-select数据量过多卡顿资源-CSDN下载

版权申诉

antd

64 浏览量 2021-01-22 10:42:56 上传评论 1 收藏 132KB PDF 举报

资源推荐

资源详情

资源评论

antd的的select下拉框因为数据量太大造成卡顿的解决方式下拉框因为数据量太大造成卡顿的解决方式

相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户

体验都没有了。

当然这不是我想去优化它的动力，主要是公司业务人员和后端的同事也无法忍受，于是我只能屈从于他们的淫威。。。。

想要优化肯定要知道为什么会卡，初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿，于是想要不卡只能限制渲染的数据数量。

我的想法是这样的：任何时候都只渲染前100条数据以保证不卡顿，然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后当select框不下拉的时候也就是失焦的时候将数据回复原

样。

下面是我的具体实现：下面是我的具体实现：

先从后台拿到数据，保存到变量fundList中（作为数据源，永远不改动），然后取其中的前100条数据保存到fundList_中，用来下拉框的数据渲染

{fundList_.map(item => <Option key={item.fund} value={item.fund}>{item.name}</Option>)}

这是整个select组件：

<Select

mode="multiple"

maxTagCount={0}

placeholder="请选择"

showSearch={true}

onBlur={this.handleOnBlur}

onSearch={this.handleOnSearch}

allowClear={true}

onChange={(value)=>{this.modalChangeSelect(value,'1')}}

style={{width:'223px'}}

value={record['1']||undefined}

disabled={this.state.visibleType==='修改'?true:false}

{fundList_.map(item => <Option key={item.fund} value={item.fund}>{item.name}</Option>)}

</Select>

然后写search里面的功能

handleOnSearch = value => {

// 函数节流，防止数据频繁更新，每300毫秒才搜索一次

let that = this

if (!this.timer) {

this.timer = setTimeout(function(){

that.searchValue(value)

that.timer = null

},300)

}

searchValue = (value) => {

const datas = [] const {fundList} = this.state

// 对fundList进行遍历，将符合搜索条件的数据放入datas中

fundList.forEach(item => {

if (item.name.indexOf(value) > -1) {

datas.push(item)

}

})

// 然后只显示符合搜索条件的所有数据中的前100条

this.setState({fundList_: datas.slice(0,100)})

}

当select失焦的时候，将数据恢复原样（只显示fundList中的前100条数据）：

handleOnBlur = () => {

this.setState({fundList_: this.state.fundList.slice(0,100)})

}

到此这个功能就大体实现了，已经不存在卡顿的问题了，但是这个方法并不是完美的，这不，业务就说了，你只显示了前100条数据，但是我有时候不通过搜索功能查找某条数据，我要在所有的数据里

面直接找到那条数据（业务也不嫌累。。。），我要显示所有的数据。

这下就难办了，因为卡顿就是渲染太多的数据造成的，所以还是不能一次性渲染所有的数据，然后怎么办呢，我也不知道怎么办呐。于是上网搜索了一下别人碰到相关问题的解决办法，于是还真的找到

了。

思路是这样的：

同样是先只展示前100条数据（这个没办法，想要不卡只能这样），然后当滚动条滚到第100条数据也就是滚到底部的时候再增加100条，就这样一直到展示所有的数据,下面是具体的实现步骤：

1、先造点假数据：、先造点假数据：

const data = [];

for (let i = 0; i < 1000; i++) {

data.push(`test${i}`);

}

// 一开始只展示前100条数据

const data_ = data.slice(0, 100);

2、渲染出来、渲染出来

<Select

showSearch

allowClear

onPopupScroll={this.handleScroll}

style={{ width: 200 }}

placeholder="Select a person"

optionFilterProp="children"

onChange={this.onChange}

onFocus={this.onFocus}

onBlur={this.onBlur}

onSearch={this.onSearch}

filterOption={(input, option) =>

option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0

}

{optionData.map(item => (

))}

</Select>

3、写滚动条滚动的功能、写滚动条滚动的功能

在这里就要说一下select里面的一个参数了，就是 onPopupScroll，以前没有注意到，看到别人提醒的时候才发现。有了它就可以实现滚动实时刷新数据了。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论收藏

内容反馈

版权申诉

weixin_38664427

粉丝: 3

antd的select下拉框因为数据量太大造成卡顿的解决方式

解决Antd vue下拉框卡顿问题

下拉框内容太多，使用Javascript快速选择

select项内容过长解决办法

antd多选下拉框一行展示的实现方式

解决Antd 里面的select 选择框联动触发的问题

Ant Design前端框架 v3.23.5

react-virtualized-scroll:虚拟滚动搭配上拉应变加载的scroll组件

virtual-list-scroll

jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

ant-design-vue按需加载的坑的解决

搜索功能select下拉框实现自动匹配

select下拉框自动显示选项

select 分组下拉菜单自定义样式

下拉框多选

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

可进行输入编辑的select下拉框

深入理解Antd-Select组件的用法

tree-select:React树选择

vue大数据表格卡顿问题的完美解决方案

AmazeUI 下拉选框

下拉框(select)，可以多选，带有分组搜索功能

antd form 封装可搜索可输入select

antd-virtual-select:长列表优化antd select组件

select2控件回显方法

可以输入的下拉框 下拉框和文本框组合共用

select下拉模糊查询插件

自定义带图标的select，只需把图标地址写在option的title属性中即可

多个select 的互斥选择实现

reactselectfilterOptions功能优化用于快速过滤大型的选项列表

最新资源

可以输入的下拉框下拉框和文本框组合共用