Antd的Table组件实现自定义分页数据条数

    科技2022-08-07  171

    在项目中遇到这个问题,因为Antd的Table组件默认一页显示10行,而项目中只需要5行。

    看了很多博客,都是什么先将pagination设置为false,然后再自定义分页组件,而且很多博客都是照搬。

    本人认为设计者肯定不会设计为了一个条数就得将整个分页属性都重新设计的麻烦操作,后面还是自己去看官网发现有pageSize这个属性,再加上大胆尝试,用一行代码实现自定义分页条数,如下图所示:

    <Table rowSelection={{ type: selectionType, ...rowSelection, }} columns={columns} dataSource={datas} rowKey={record => record.id} pagination={{pageSize:5}}//自定义每页显示的数据条数 />

    成功显示5行数据。

    Processed: 0.010, SQL: 8