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


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

  • 默认效果
  • 固定pagination位置

默认效果

在这里插入图片描述 点击第二页后当数据不足5条时pagination会上移到最后一条数据下方

在这里插入图片描述

固定pagination位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 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文件设置

1
2
3
#roleTable{<!-- -->
    height: 200px;
}

将less文件导入jsx文件中生效即可，效果图如下：
在这里插入图片描述