Ant 设计表的动态 pageSize 属性

Question

我正在使用 Ant Design 来获取带有分页的数据表。 我想要的结果是让这个组件在父容器的整个高度上拉伸，并根据可用空间调整行数。 但是，由于我必须考虑不同最终用户的屏幕尺寸，我不能简单地假设单个页面中有多少行，如下所示：

  <Table
    pagination={{ pageSize: 6 }}
    columns={columns}
    dataSource={sampleData}
  />

是否有任何推荐的方法来使 pageSize 属性对屏幕的高度变化做出动态反应？ 还是我应该手动设置某些断点？

Answer 1

这种行为没有antd API，需要自己计算。

确定屏幕高度的有用函数是：

• clientHeight
• getBoundingClientRect

请注意，这些元素函数，在 React 中，您应该通过引用访问它们，例如使用useRef 。

Answer 2

我解决这个 UX 问题的方法是设置scroll属性：

scroll={{ y: "calc(100vh - 250px)" }}

这样，表格的高度将适应用户的客户端高度，您只需将250px更改为适合您的任何值。