antd 組件 select 分頁懶加載 autocomplete onPopupScroll

若是列表數據過大，初始能夠加載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   };