Vaadin 23所有Grid切换UI后自动刷新问题求助

问题原因 #

• Grid列渲染的触发逻辑：addComponentColumn的回调方法会在Grid需要渲染单元格时执行，包括组件初始化、页面刷新、Tab切换场景。Vaadin的TabSheet默认会延迟渲染未激活Tab的内容，但一旦切换到该Tab，或页面刷新时（配合@PreserveOnRefresh），已创建的Grid会重新触发渲染回调。
• @PreserveOnRefresh的影响：该注解会让页面刷新时保留UI组件状态，但Grid仍会重新渲染所有已初始化的单元格，导致回调重复执行。
• TabSheet的渲染机制：未激活Tab的内容首次切换时会完成渲染，后续切换或页面刷新时，Grid会再次触发列渲染逻辑。

解决方案 #

1. 将Dialog触发逻辑从列渲染回调中分离 #

不要在列渲染回调中直接打开Dialog，把交互逻辑移到独立的用户触发事件（如按钮点击），避免渲染时重复执行。

修改后的代码示例：

@Route("test")
@PreserveOnRefresh
public class Test extends Div {
    public Test(){
        Grid<String> grid1 = new Grid();
        List<String> grid1List = new ArrayList<>();
        grid1List.add("grid1Element");
        grid1.setItems(grid1List);
        // 通过按钮点击触发Dialog，而非渲染单元格时直接打开
        grid1.addComponentColumn(item -> {
            Button operateBtn = new Button("操作", e -> {
                Dialog grid1D = new Dialog(new Span("Grid1 Dialog"));
                grid1D.open();
            });
            return operateBtn;
        });

        Grid<String> grid2 = new Grid();
        List<String> grid2List = new ArrayList<>();
        grid2List.add("grid2Element");
        grid2.setItems(grid2List);
        grid2.addComponentColumn(item -> {
            Button operateBtn = new Button("操作", e -> {
                Dialog grid2D = new Dialog(new Span("Grid2 Dialog"));
                grid2D.open();
            });
            return operateBtn;
        });

        TabSheet tabs = new TabSheet();
        tabs.add("Grid1", grid1);
        tabs.add("Grid2", grid2);

        add(tabs);
    }
}

2. 在数据加载阶段处理错误逻辑 #

如果需要处理数据加载错误，将Dialog触发逻辑移到数据源加载的代码块中，而非列渲染回调：

// 示例：数据加载失败时弹出Dialog
try {
    List<String> grid1List = loadGrid1Data(); // 自定义数据加载方法
    grid1.setItems(grid1List);
} catch (Exception e) {
    Dialog errorDialog = new Dialog(new Span("Grid1数据加载失败"));
    errorDialog.open();
}

3. 延迟Grid初始化到Tab首次激活时 #

通过TabSheet的选中事件，仅在Tab首次被激活时初始化Grid，避免提前渲染导致的重复逻辑执行：

TabSheet tabs = new TabSheet();
// 先添加空容器占位
Div grid1Container = new Div();
tabs.add("Grid1", grid1Container);

tabs.addSelectedChangeListener(event -> {
    Tab selectedTab = event.getSelectedTab();
    if ("Grid1".equals(selectedTab.getLabel()) && grid1Container.getChildren().count() == 0) {
        // 首次激活Tab时才初始化Grid
        Grid<String> grid1 = new Grid();
        List<String> grid1List = new ArrayList<>();
        grid1List.add("grid1Element");
        grid1.setItems(grid1List);
        grid1.addComponentColumn(item -> new Span(item));
        grid1Container.add(grid1);
    }
});

4. 按需移除@PreserveOnRefresh注解 #

如果应用不需要保留页面刷新时的UI状态，可以移除@PreserveOnRefresh，页面刷新时会重新创建组件，仅当前激活Tab的Grid会被渲染，减少不必要的渲染操作。

内容的提问来源于stack exchange，提问作者Miłosz Bąbliński