antd 组件 select 分页懒加载 autocomplete onPopupScroll

如果列表数据过大，初始可以加载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
  };