实现原理:要支持分页,就是在下拉列表滚动到底的时候发起下一次请求,把请求数据push到现有的下拉框里面
const [options, changeOptions] = useState([])
const [searchData, changeSearchData] = useState({
pagination: {
current: 1,
pageSize: 10,
total: 0
},
searchValue: ''
})
const { pagination: { current, pageSize, total }, searchValue } = searchData
useEffect(() => {
// 页码,及搜索值变化时,发请求
const data = {
current,
pageSize,
searchValue
}
request('/api/getList', data).then(res => {
const { pagination, options } = res
changeOptions(options)
changeSearchData({ ...searchData, pagination })
})
}, [current, searchValue])
const scrollEnd = (e) => {
e.persist();
const { target } = e;
// 滚动 触底 看接口是否还有剩余的值没传过来
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
if (current * pageSize < total) {
changeSearchData({
...searchData,
pagination: {
...searchData.pagination,
current: current + 1
},
})
}
}
}
// 搜索条件变化时,current变成1,
const searchDataset = (value) => {
changeSearchData({
pagination: {
...searchData.pagination,
current: 1
},
searchValue: value
})
}
return (
<Select
showSearch={true}
options={options}
// options的值 搜索需要filterOption return true 保证过滤的数据是从接口取过来的
filterOption={() => { return true }}
onPopupScroll={scrollEnd}
onSearch={debounce(searchDataset, 500)} // 防止频繁触发请求
>
</Select>
)