封装

/components/Pagination.tsx
import React from 'react'
import { Pagination } from 'antd'

const PaginationWarp = ({ total, paramsInfo, setParamsInfo }) => {
  return (
    <Pagination
      total={total}
      current={paramsInfo.page}
      showSizeChanger
      showQuickJumper
      defaultPageSize={100}
      onChange={(page, pageSize) => {
        const obj = {
          ...paramsInfo,
          page,
          pageSize,
        }
        setParamsInfo(obj)
      }}
      pageSizeOptions={['100', '50', '20']}
      showTotal={total => `总数 ${total} 条`}
    />
  )
}
export default PaginationWarp

使用

import PaginationWarp from '@/components/Pagination.tsx'
{total.current && (
          <PaginationWarp
            total={total.current}
            paramsInfo={paramsInfo}
            setParamsInfo={setparamsInfo}
          />
        )}