标签：const his not 数据 search 支持 rop 异步调用 arch
如果列表数据过大，初始可以加载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
标签：const his not 数据 search 支持 rop 异步调用 arch
原文地址：https://www.cnblogs.com/clairelss/p/11063808.html
