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的主要内容,如果未能解决你的问题,请参考以下文章
React —— antd Table组件 分页Pagination