antd table分页居中显示(react)

在最新版的antd中,.ant-table-pagination ** 是flex,.ant-table-pagination-right**设置的 justify-content: flex-end,所以分页默认在右边展示,如下:
antd table分页居中显示(react)
antd table分页居中显示(react)
我们想要分页居中,首先要把flex给成display: block;
然后在给 .ant-table-pagination-right设置居中 text-align: center;
上代码:

.center_table{
  :global {
    .ant-table-pagination {
      display: block;
    }

    .ant-table-pagination-right {
      float: none !important;
      text-align: center;
      margin-top: 36px;
    }
  }
}

注意,要给你的table设置className

<Table
    columns={columns}
    dataSource={list}
    scroll={{ x: 1300 }}
    pagination={pagination}
    rowKey={record => record.id}
    className={styles.center_table}
  />;

然后就居中啦,上图:
antd table分页居中显示(react)

上一篇:看完这篇不要告诉我不会封装ant design弹框组件了


下一篇:Linux:Jmeter+Ant+Jenkins