Ant design pro常用组件(2):Table使用分页

最新推荐文章于 2023-12-05 17:35:27 发布

qq_32496215

最新推荐文章于 2023-12-05 17:35:27 发布

阅读量1.5k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_32496215/article/details/109571301

版权

本文介绍了一个用于前端分页展示的工具函数getTotal，该函数基于当前页面和数据长度计算出总条目数，并展示了如何在React组件中使用此函数进行分页逻辑处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

utils/toolUtils.ts(公共的方法)

import config from './config' //config.pageSize=20;
//其中length是调用接口获取的数据的长度
export function getTotal(length:number,page:number){
    return length === 0 
    ? 
    	page * config.pageSize + length
     :
     	 (page-1)*config.pageSize + length +1
}

getTotal使用

import config from '@/utils/config'
import { getTotal  } from '@/utils/toolUtils'
export default class Customer extends Component {
	state={
			list:[],
			page:1,
			total:0,
			loading:false
	};
	componentDidMount(){
        this.getCustomerList()
    };
    getCustomerList(){
        this.setState({loading:true})
        const {dispatch} = this.props;
        if(dispatch){
            dispatch({
                type:'customer/getCustomerListEffect',
                payload:{...this.state.listQuery,...{page:this.state.page}}
            }).then(()=>{
                const {customerList} = this.props;//获取数据
                let total =  getTotal(customerList.length,this.state.page);//获取总条数
                this.setState({list:customerList,total});
                this.setState({loading:false})
            })
        }
    };
    render(){
		  const {list,page,total,loading} = this.state;
	        let pagination:any={
	            pageSize:config.pageSize,
	            current:page,
	            total:total,
	            showSizeChanger:false
	            
	        };  
        return(
            <Table  loading={loading}
                    rowKey={record=>record.id} 
                     dataSource={list} 
                      columns={this.columns}
                       pagination={pagination}
                     	onChange={this.pageChange}
             />
        )
	};
	pageChange =(pagination:any, filters:any, sorter:any)=>{
        this.setState({page:pagination.current},
            ()=>{
                this.getCustomerList()
            }); 
    }
}