Ant Design Table 的动态页面大小属性答案

【问题标题】：Dynamic pageSize property of the Ant Design's TableAnt Design Table 的动态页面大小属性
【发布时间】：2020-10-14 15:54:18
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

注意那些元素函数，在 React 中你应该通过引用来访问它们，例如 useRef。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：