Vaadin 24 Grid行高定义异常求助：切换数据量后滚动条异常

问题背景 #

在Vaadin 23中运行正常的Grid自定义行高逻辑，在Vaadin 24中出现异常：先加载大量数据再切换到少量数据时，Grid的tbody标签高度计算错误，导致滚动条可滚动范围超出实际行数。问题源于自定义行高（首行高度与其他行不同）时，Vaadin 24的虚拟滚动机制未正确重新计算总高度。

解决方法 #

1. 清理冗余的数据设置逻辑 #

当前代码中addItems方法重复调用了grid.setItems(items)和带数据提供者的setItems，会导致Grid内部状态混乱，保留一种数据设置方式即可：

private void addItems(Grid<String> grid, int max) {
    List<String> items = new ArrayList<>();
    for (int i = 0; i < max; i++) {
        items.add("Item " + i);
    }
    // 仅保留数据提供者方式（或直接使用grid.setItems(items)）
    grid.setItems(
            query -> {
                Stream<String> stream = items.stream();
                if (query.getInMemorySorting() != null) {
                    stream = stream.sorted(query.getInMemorySorting());
                }
                return stream.skip(query.getOffset()).limit(query.getLimit());
            },
            query -> items.size());
}

2. 使用官方API定义自定义行高 #

避免通过CSS强制设置行高，改用Vaadin Grid提供的setRowHeightProvider方法，让框架准确感知每一行的高度，从而正确计算虚拟滚动总高度：

// Grid初始化时添加行高提供者
grid.setRowHeightProvider(item -> {
    // 获取当前行索引（示例逻辑，可根据实际数据结构调整）
    int rowIndex = grid.getDataCommunicator().getKeyToItemMap().values().stream()
            .collect(Collectors.toList()).indexOf(item);
    // 首行使用24px，其他行用20px
    return rowIndex == 0 ? 24 : 20;
});

同时简化CSS，仅保留变量定义：

:host(.my-grid) {
  --lumo-size-m: 20px;
  --lumo-size-xl: 24px;
}

3. 数据更新后强制触发尺寸重计算 #

若需保留CSS行高设置，可在每次数据更新后手动触发Grid重新计算虚拟滚动尺寸：

private void addItems(Grid<String> grid, int max) {
    // ... 数据构建逻辑 ...
    grid.setItems(...);
    // 执行JS强制更新虚拟滚动尺寸
    grid.getElement().executeJs("this._updateVirtualScrollingSize();");
}

4. 临时禁用虚拟滚动（小数据量场景） #

若上述方法无效，可临时关闭虚拟滚动（仅适合数据量不大的场景）：

grid.setVirtualRows(false);

内容的提问来源于stack exchange，提问作者christoffschmitz