码迷,mamicode.com
首页 > 其他好文 > 详细

antd 组件 select 分页懒加载 autocomplete onPopupScroll

时间:2019-06-21 12:22:19      阅读:239      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!