在平时开发中可能会遇到antd的Table组件上下合并单元格的场景,这种情况下接口返回的数据是符合分页的,
但是每一条数据都会有"children" 子数据,需要前端自己拆出来扁平化,所以实际渲染上的数量是超过分页页码的
问题1
如果使用antd Table组件的pagination属性,他会自动截断,比如pageSize为10时,但是前端实际转换后为15条数据,他只会显示前10条
解决1
关闭 Table组件的pagination属性,手动在Table组件下方增加Pagination组件
问题2
使用了ahook的useAntdTable,并且{...tableProps.pagination}
<Pagination
style={{ marginTop: 20, textAlign: 'right' }}
{...tableProps.pagination}
size="small"
align="end"
showTotal={total => `共 ${total} 条`}
/>
发现tableProps.pagination里没有onChange,新版的Table组件分页的onChange已经集成到了Table组件的onChange属性里而不是pagination属性上,而现在手动用了Pagination组件,则需要手动加上Pagination的onChange
解决2
<Pagination
...
{...tableProps.pagination}
onChange={(page, pageSize) => tableProps.onChange({ current: page, pageSize })}
...
/>