Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

antd 组件 select 分页懒加载 autocomplete onPopupScroll

过客人生 2019-06-21 03:57:00 阅读数:471 评论数:0 点赞数:0 收藏数:0

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

 

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

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

 组件代码:

 <FormItem {...formItemLayout} label="公司">
<div id="companyDiv" style={{ position: 'relative' }}>
{getFieldDecorator('checkCompanyIds', {
 rules: [{ required: true, message: '请选择公司' }],
  initialValue:
 planInfo &&
planInfo.checkCompanyIds &&
planInfo.checkCompanyIds.split(',').map(Number),
  })(
 <Select
 placeholder="请输入公司名"
mode="multiple"
 labelInValue
 notFoundContent={fetching ? <Spin size="small" /> : null}
onSearch={this.fetchCompany}
 onChange={this.setCheckNum}
 onPopupScroll={this.companyScroll}
 filterOption={false}
 getPopupContainer={() => document.getElementById('companyDiv')}
 >
{companyData &&
companyData.map(item => (
 <Option value={item.id} key={item.id}>
 {item.companyName}
 </Option>
 ))}
 </Select>
 )}
 </div>
</FormItem>

页面滚动加载代码:

 companyScroll = e => {
  e.persist();
 const { target } = e;
 if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
 const { scrollPage } = this.state;
 const nextScrollPage = scrollPage + 1;
 this.setState({ scrollPage: nextScrollPage });
 this.getCompanyList(nextScrollPage); // 调用api方法
 }
 };

搜索代码:

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

 

版权声明
本文为[过客人生]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/clairelss/p/11063808.html