平时使用antd中Select的下拉一般就几十几百条,这时候直接使用组件模糊查询就能实现大部分业务场景需求。
今天遇到一个需要模糊查询并且总量上万条的下拉框,如果一次性怼上去上万条,会造成浏览器卡顿。所以这边采用后端分页,前端触底加载刷新的方式去优化这个模糊查询。
<Select
allowClear //支持清除
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.admissionRecordCheck
const { 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('请求错误!')
}
})
}
}