React固定Antd的Table组件中的pagination位置

默认效果

点击第二页后当数据不足5条时pagination会上移到最后一条数据下方

固定pagination位置

// Table组件属性设置
<Table
   id="roleTable"
   dataSource={dataSource}
   columns={Columns}
   pagination={{
     position: ['bottomCenter'],
     showSizeChanger: true,
     showQuickJumper: true,
     showTotal: (total) => {
        return (
           <span
              style={{
                 fontSize: 16,
                 color: '#264653',
                 fontFamily: "微软雅黑",
              }}
            >共{total}条数据</span>
       )
    },
    total:total
    pageSize: currentPageSize,
    onChange: (page, pageSize) => {
        this.setState({
            currentPage: page,
            currentPageSize: pageSize
        })
    },
    current:currentPage,
  }}
/>

less文件设置

#roleTable{
    height: 200px;
}

将less文件导入jsx文件中生效即可，效果图如下：