带有换行内容的 Vaadin 14 Grid autoWidth答案

【问题标题】：Vaadin 14 Grid autoWidth with wrap content带有换行内容的 Vaadin 14 Grid autoWidth
【发布时间】：2021-07-28 13:42:30
【问题描述】：

我正在使用 Vaadin 14，但我在调整 Grid 中的单元格时遇到了问题。我想在所有列上设置自动宽度以减小内容大小较小的列的大小，但长期以来我想在没有水平滚动的情况下实现列的最大大小（我想一次查看所有列）以及何时超过大小表格然后我想将内容包装在此列中。

当我为所有列设置自动宽度时，我的长内容显示在一行中，我必须水平滚动才能看到其他列。当我设置时

grid.addThemeVariants(GridVariant.LUMO_COMPACT,GridVariant.LUMO_WRAP_CELL_CONTENT); 那么我的长列与其他内容短的列具有相同的大小，但包含多行内容。其他列的内容太长。

我无法为每列单独设置宽度，因为我不知道网格中有多少列以及哪一列的内容是长内容还是短内容。

【问题讨论】：

这对我来说听起来很简单，但实际上很难实现。一旦你开始包装列，它们突然需要更少的宽度，你将不得不再次重新计算所有内容。它如何决定哪些列要包装，哪些不包装？我认为布局只是不支持它。

【解决方案1】：

这是我会尝试的：

【讨论】：

但我不知道表格中有多少列，它们将占用多少空间以及有多少列将包含长内容+我想让用户调整默认宽度。我想第一眼看到所有列，但仍然让用户将它们的大小调整到面板中网格的宽度以上。我还有一个问题，是否可以禁用水平滚动，而不是当我调整一列的大小时，其他列会改变它们的大小以适应网格的宽度而不添加水平滚动/只是将下一列移到表格的更远位置?
您可以尝试将所有列的宽度设置为零，以允许它们缩小到默认的 100px 宽度以下。但是一旦用户调整一列的大小，该列和它之前的所有列都将获得固定宽度，并且当您调整其他列的大小时不会再缩小/增长。您可以尝试监听column-resize 事件，重置宽度并调整 flexGrow 以匹配宽度分布。