Vaadin框架下切换标签组件时保留标签内容的方法咨询
Vaadin切换标签组件保留内容的可行方案
- 直接禁用内容销毁机制
如果使用Vaadin 23+提供的TabSheet组件,默认仅会缓存当前可见标签的内容,不可见标签的组件会被从DOM中移除。你可以调用tabSheet.setTabCacheSize(总标签数量),将缓存值设置为和你实际总标签数一致,所有标签的内容实例会被全程保留,切换时不会重新渲染,用户输入的内容自然不会丢失。
如果是自行用Tabs组件配合自定义内容容器实现的标签逻辑,不要在切换标签时执行移除旧组件、新增新组件的操作,提前创建好所有标签对应的内容组件,切换时仅调用setVisible(true/false)控制显隐即可。 - 配合路由使用
@RouteScope注解
如果每个标签页对应独立的路由视图,给对应视图类添加@RouteScope注解,该作用域会在承载Tabs的父布局生命周期内保留所有子视图的实例,切换标签触发的路由跳转不会重新生成视图实例,和@PreserveOnRefresh仅适配页面刷新的场景不同,这个方案天然适配同页面内的标签切换场景。 - 手动持久化状态适配动态标签场景
如果你的标签是用户可动态新增/删除的、数量不固定,无法提前创建所有内容组件,可以在父布局层维护一个以标签ID为key的状态存储Map,每次切换标签前将当前标签内的所有表单值、交互状态存入Map,再次切回该标签时,先读取Map中对应的状态数据回填到新创建的组件中,也能实现内容保留的效果。
内容的提问来源于stack exchange,提问作者samwatts
相关产品推荐
相关产品推荐

