3. 常用分页组件

import React from 'react';
import PropTypes from 'prop-types';
import { Pagination } from 'antd';
import styles from './style.module.less';
const Page = (props) => {
  const { totalCount, pagination } = props;
  const showTotal = (total) => `共${total}条`;
  return (
    <div className = {styles.pageWrapper}>
        <Pagination
          total={totalCount}
          showTotal={showTotal}
          {...pagination}
         />
    </div>
  );
};
Page.propTypes = {
  totalCount: PropTypes.number,
  pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
};
Page.defaultProps = {
  totalCount: 0,
  pagination: false,
};
export default Page;
.pageWrapper {
  text-align: center;
  margin-top: 7px;
  : global {
    .ant-pagination-item a {
      line-height: 20px;
      font-size: 12px;
    }
    .ant-pagination-total-text {
      color: @text-color;
      font-size: @font-size-lg;
    }
    .ant-pagination-item {
      border: none !important;
      border-radius: @border-radius-lg !important;
      min-width: 23px !important;
      height: 22px !important;
    }
    .ant-pagination-item-active {
      background: @white !important;
      border: 1px solid @primary-color !important;
    }
    .ant-pagination-item-active a {
      color:  @primary-color !important;
    }
    .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .antpagination-item-link {
      border: none !important;
      line-height: 22px !important;
    }
  }
}
// 用法  定义pagination
const pagination = {
  current: _.get(data, 'pageNum'),
  pageSize: _.get(data, 'pageSize'),
  onChange,
  showSizeChanger: false,
  hideOnSinglePage: true,
};