带有垂直和水平滚动的Ant设计表

Question

我正在使用Ant Design Table来显示公司内部API的动态数据。

这意味着我不知道我将收到哪种数据来填充每个单元格。它可以是大文本，数字，空值，短字符串，图像，URL等。

我需要应用水平和垂直滚动，但如Ant Design文档所述：

  

如果标题和单元格未正确对齐，请指定列的宽度。 （至少留一列，不留宽度以适合流体布局）。建议使用一个大于scroll.x表宽度的固定值。未固定列的总和不应大于scroll.x。

现在，宽度很好，Ant Design Table可以找出每列的最佳比例。参见下面的图片：

问题是当我设置y滚动时。下面是一个例子：

这里的主要问题是我不知道每一列的数据大小。 说到列，我必须从表源中提取键以便动态生成列。

是否可以解决此问题？

谢谢！

Answer 1

因此，这是Ant Design检查here，here，here和here上的一个已知问题

没有适当的解决方法，我遇到了同样的问题，我尝试设置每列的宽度，在该列中设置“ width”属性有效，但对于粘页眉却无法使用。

解决此问题的另一种简单方法是使用水平滚动并删除垂直滚动，就像这样

scroll={{ x: 400 }}

Answer 2

我想出了解决此问题的方法。为了根据列的宽度为整个表格设置宽度，我必须遍历所有表格数据，并根据其自身内容的长度计算每个单元格的宽度。

然后，我可以求和总宽度并将其设置在表格中。

下面是使用这种方法的示例：