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

Posted 2023-02-22

【中文标题】具有垂直和水平滚动的 Ant Design Table

【英文标题】：Ant Design Table with vertical and horizontal scroll

【发布时间】：2019-08-22 17:58:14

【问题描述】：

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

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

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

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

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

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

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

是否可以绕过这种行为？

谢谢！

【问题讨论】：

这个案子已经办完了吗？

@OnesinusSaut no.

@spiny_beast 我做了一个解决方法来解决这个问题。这不是最迷人的解决方案，但我遇到了根据字符数计算宽度的每一列。我还为每个列宽设置了一个最大值。有效。只需注意表中的数据量，它可能会导致一些性能问题。您还可以设置分页来帮助您提高性能 =)

【参考方案1】：

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

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

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

scroll= x: 400 

【讨论】：

谢谢！我和你做的一样，我为每列设置了宽度，但我是动态地做的，它起作用了。现在您可以设置 XScroll、YScroll 和固定列。我将其发布为答案。

【参考方案2】：

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

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

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

【参考方案3】：

参考@Afaq 所附问题中的this comment。

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

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