ahook中useAntdTable和Table组件中合并单元格问题

在平时开发中可能会遇到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 })}
      ...
      />
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容