Vaadin 24中Grid等价于setHeightByRows的实现方案咨询

在Vaadin 24中，可以通过计算行高度并动态设置Grid高度的方式，实现和Vaadin 8中setHeightByRows相同的效果，同时避免一次性加载所有元素：

实现步骤 #

1. 确定Grid的行高：Vaadin默认行高为48px，如果是自定义行高，直接使用你设置的数值即可。
2. 根据数据行数计算目标高度：当行数≤12时，高度为「行数×行高」；超过12行时，固定为「12×行高」。
3. 给Grid设置计算后的高度，虚拟滚动默认开启，只会加载可视区域内的元素，无需担心性能问题。

代码示例 #

// 默认行高（可根据自定义样式调整）
int rowHeight = 48;
// 获取数据总数
int totalItems = grid.getDataProvider().size();
// 计算目标显示行数
int targetRows = Math.min(totalItems, 12);
// 设置Grid高度
grid.setHeight(targetRows * rowHeight + "px");

补充说明 #

• 该方式不会像setAllRowsVisible(true)那样一次性加载所有元素，保持了虚拟滚动的性能优势。
• 如果你的Grid使用了自定义行高（比如通过CSS修改vaadin-grid-row的高度），只需要把rowHeight改成对应的数值即可。

内容的提问来源于stack exchange，提问作者Sogawa-sps