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

Question

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

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

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

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

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

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

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

是否可以绕过这种行为？

谢谢！

Answer 1

所以这是 Ant Design 检查中的已知问题 here、here、here 和 here

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

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

scroll={{ x: 400 }}

Answer 2

请参阅@Afaq 所附问题中的此评论。

对于遇到此问题的任何人，请为每列设置宽度，并在表格中添加以下代码：scroll={{ x: "max-content" }}。这将自动调整您的列宽。

这应该可以解决大多数人的问题。

Answer 3

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

之后，我可以将总宽度相加并将其设置到表格中。

这里是使用这种方法的示例：

Answer 4

设置scroll={{ x: "max-content" }} 和 ellipsis: true 对于每列都非常适合我