具有垂直和水平滚动的 Ant Design Table

Question

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

这意味着我不知道我将收到什么样的数据来填充每个单元格。它可以是大文本、数字、空值、短字符串、图像、url 等任何内容。

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

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

现在，宽度很好，Ant Design Table 可以计算出每一列的最佳比例。请参见下图：

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

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

是否有可能绕过这种行为？

谢谢！

原文由 Italo Borges 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

之后，我可以对总宽度求和并将其设置到表格中。

这里有一个使用这种方法的例子：

原文由 Italo Borges 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

所以这是 Ant Design 的一个已知问题，请 在此处、 此处、 此处 和 此处查看

没有正确的解决方法，我遇到了同样的问题，我尝试为每列设置宽度，在列中设置“宽度”属性有效，但它会因粘性标题而中断。

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

scroll={{ x: 400 }}

原文由 Afaq Ahmed Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议