当前位置：首页 > news >正文

antd中Select大数据分页触底刷新处理优化

news 来源：原创 2024/7/7 16:21:22

平时使用antd中Select的下拉一般就几十几百条，这时候直接使用组件模糊查询就能实现大部分业务场景需求。

今天遇到一个需要模糊查询并且总量上万条的下拉框，如果一次性怼上去上万条，会造成浏览器卡顿。所以这边采用后端分页，前端触底加载刷新的方式去优化这个模糊查询。

<SelectallowClear  //支持清除showSearch  //支持输入filterOption={false}   //这个参数false才能支持接口数据动态刷新style={{ width: '100%' }}onSearch={this.diagNameonSearch}  //输入onChange={this.diagNameChange}onPopupScroll={this.onPopupScroll}  //监听下拉事件placeholder={'请选择诊断'}getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)} //防止页面滚动导致下拉框错位>{Array.isArray(diagNameList) && diagNameList.map((item: any) => {if (item.itemName) {return <Option value={item.itemName}>11{item.itemName}</Option>}})}</Select>

diagNameChange = (e: any, action: any) => { //选择事件this.updateState({ diagName: e, });console.log(action, 'action')if (action === undefined) {this.props.dispatch({type: 'admissionRecordCheck/pageGet',payload: {keyword: '',pageNum: 1,pageSize: 10,},})}
};
diagNameonSearch = (e: any) => { //输入事件clearTimeout(this.state.antiShake) //加入防抖  防止输入时反复调用接口this.setState({antiShake: setTimeout(() => {this.updateState({ //保存当前输入值  用于后续触底刷新keyword: e,})this.props.dispatch({type: 'admissionRecordCheck/pageGet',payload: {keyword: e,pageNum: 1,pageSize: 10,},})}, 1000)})
}
onPopupScroll = (e: any) => { //滚动事件 用于判断触底刷新const { pageGetpageNum, pageGetpageSize, diagNameList, keyword } = this.props.admissionRecordCheckconst { target } = e;const { scrollTop, scrollHeight, clientHeight } = target;if (scrollTop + clientHeight == scrollHeight) { //触底 触发分页查询接口！this.props.dispatch({type: 'admissionRecordCheck/pageGetScroll',payload: {keyword,pageNum: pageGetpageNum + 1,pageSize: 10,},}).then((res: any) => {if (res && res.resultCode == "000000") {let dataList = Array.isArray(res.data.dataList) ? res.data.dataList : []this.updateState({diagNameList: diagNameList.concat(dataList), //合并原数组pageGetpageNum: pageGetpageNum + 1,})} else {(res && res.resultMsg) ? message.warning(`${res.resultMsg}`) : message.error('请求错误！')}})}}