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 阅读数:277 评论数: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