antd 组件 select 分页懒加载 autocomplete onPopupScroll

Posted clairelss

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd 组件 select 分页懒加载 autocomplete onPopupScroll相关的知识,希望对你有一定的参考价值。

如果列表数据过大,初始可以加载10-20条数据 ,通过用户搜寻关键字或者滚动select组件分页加载数据解决问题 ,网上资料比较少就写了一下。

 

1. onSearch 可以支持 类似autocomplete功能 异步调用api获取新的列表数据

技术图片

2.下拉列表滚动  可以实现懒加载 分页加载数据 

技术图片

 组件代码:

 1  <FormItem ...formItemLayout label="公司">
 2                 <div id="companyDiv" style= position: ‘relative‘ >
 3                   getFieldDecorator(‘checkCompanyIds‘, 
 4                     rules: [ required: true, message: ‘请选择公司‘ ],
 5                     initialValue:
 6                       planInfo &&
 7                       planInfo.checkCompanyIds &&
 8                       planInfo.checkCompanyIds.split(‘,‘).map(Number),
 9                   )(
10                     <Select
11                       placeholder="请输入公司名"
12                       mode="multiple"
13                       labelInValue
14                       notFoundContent=fetching ? <Spin size="small" /> : null
15                       onSearch=this.fetchCompany
16                       onChange=this.setCheckNum
17                       onPopupScroll=this.companyScroll
18                       filterOption=false
19                       getPopupContainer=() => document.getElementById(‘companyDiv‘)
20                     >
21                       companyData &&
22                         companyData.map(item => (
23                           <Option value=item.id key=item.id>
24                             item.companyName
25                           </Option>
26                         ))
27                     </Select>
28                   )
29                 </div>
30               </FormItem>

页面滚动加载代码:

 1  companyScroll = e => 
 2     e.persist();
 3     const  target  = e;
 4     if (target.scrollTop + target.offsetHeight === target.scrollHeight) 
 5       const  scrollPage  = this.state;
 6       const nextScrollPage = scrollPage + 1;
 7       this.setState( scrollPage: nextScrollPage );
 8       this.getCompanyList(nextScrollPage); // 调用api方法
 9     
10   ;

搜索代码:

1   fetchCompany = value => 
2     this.setState( companyData: [], fetching: true );
3     this.getCompanyList(value); // 关键字模糊查询api
4   ;

 

以上是关于antd 组件 select 分页懒加载 autocomplete onPopupScroll的主要内容,如果未能解决你的问题,请参考以下文章

antd table 的分页道具

React —— antd Table组件 分页Pagination

table大量数据无分页- virtualizedtableforantd

【antd-pro】路由配置、select组件层级

Antd 表格数据分页加载,并且能够跨页选择数据

react+antd分页 实现分页及页面刷新时回到刷新前的page