antd proFromSelect 懒加载+模糊查询

antd proFromSelect 懒加载+模糊查询

场景

查询用户的时候数量特别大，有10w条数据，不可能直接全部查询用来展示

所以本文章将讲解如何使用懒加载+模糊查询，解决数量过大的问题

后端代码就不用展示了，很简单的分页查询，主要是前端的逻辑

我把返回的json放到最后了，后端就返回这点东西，入参的话就在queryAllUser函数里面，就三个，一个查询的内容，一个页码一个当页数量

不多说直接上代码

1、标签

<ProFormSelectrules={[{required: true,message: `名字为必填项`,},]}placeholder="请选择"name="id"label="名字"width={`md`}fieldProps={{// 可搜索showSearch: true,// 多选下通过响应式布局让选项自动收缩maxTagCount: 'responsive',// 设置 false 时关闭虚拟滚动virtual: true,// 下拉列表滚动时的回调onPopupScroll: e => handleScroll(e),// 文本框值变化时回调onSearch: handleSearchChange,// 这里可加入自定义加载动画dropdownRender: menu => (<>{menu}{loading && (<divstyle={{width: '100%',height: '50px',display: 'flex',alignItems: 'center',justifyContent: 'center',}}><Spin /></div>)}</>)}}// 数据options={dataSource}/>

2、JS

  /** 加载动画 */const [loading, setLoading] = useState(false);/** 数据 */const [dataSource, setDataSource] = useState<any>([]);/** 查询改变的值 */const [searchChangeValue, setSearchChangeValue] = useState<string>('');/** 页码 */const [currentPage, setCurrentPage] = useState<number>(1);// 下一页const getNextPage = async () => {// 等于 -1 就是没值了 不需要再加载了if (currentPage === -1) {return;}try {// 查询const { code, msg, data } = await queryAllUser({name: searchChangeValue,currentPage,pageSize: 10,});// code 不等于 001 时 为查询失败if (code !== "001") {message.error(msg)return}// 开启加载动画setLoading(true);const newData: any = data;// 第一页的时候 不需要之前的数据（原始数据）if (currentPage === 1) {setDataSource([...newData])} else {// 不是第一页的时候 把查出来的数据放到原始数据（之前的数据）后setDataSource((prevData: any) => [...prevData, ...newData]);}// 页面 +1setCurrentPage(pre => (pre += 1));// 不等于 10个 的时候说明查完了// 就算刚好最后剩 10个 再走一遍逻辑就好了if (newData.length !== 10) {// 关闭加载动画、鼠标滚动时不加载setCurrentPage(-1);setLoading(false);}} catch (error) {console.log(error);} finally {setLoading(false);}};// 监听滚动条const handleScroll = (event: any) => {const { scrollTop, offsetHeight, scrollHeight } = event.target;if (scrollTop + offsetHeight === scrollHeight) {// 鼠标滚动时不加载if (currentPage !== -1) {getNextPage();}}};// 防抖函数(搜索时使用)const debounce = (func: { (value: any): void; apply?: any }, delay: number | undefined) => {let timerId: string | number | NodeJS.Timeout | undefined;return (...args: any) => {clearTimeout(timerId);timerId = setTimeout(() => {// eslint-disable-next-line prefer-spreadfunc.apply(null, args);}, delay);};};// 搜索const handleSearchChange = debounce((value: any) => {// 给查询条件赋值setSearchChangeValue(value)const fn = async () => {try {// 搜索的时候已经查了第一页了 懒加载从第二页开始查setCurrentPage(2)const { code, msg, data } = await queryAllUser({name: value,currentPage: 1,pageSize: 10,});if (code !== "001") {message.error(msg)return}const newData = data;// 由于查询时从第一页开始就不需要原始数据了setDataSource([...newData]);} catch (error) {console.log(error);}};fn();}, 1000);// 页面初始化加载useEffect(() => {getNextPage();}, []);

3、json示例

{"msg": "成功","data": [{"label": "666","value": "666"},{"label": "777","value": "777"}],"code": "00100000"
}