如何在Svelte中处理关联表格/组件间的数据交互？

核心状态管理 #

• 基于你已使用的stores，新增两个全局状态：selectedId1、selectedId2，用来记录表格A、B选中行对应的ID。
• 将A、B、C的完整原始数据数组统一存在store中，避免重复传递或多次请求。

表格组件复用方案 #

• 不需要单独创建三个表格组件，复用同一个TableComponent完全可行，只需给组件传入三个核心参数：
  • 列配置数组：根据不同表格的字段（A: id1；B: id1、id2；C: id1、id2、id3），定义对应的列标题、字段映射等配置。
  • 过滤后的数据：根据store中的selectedId1、selectedId2，提前过滤出对应表格需要展示的数据（比如B的数据用selectedId1匹配id1字段，C的数据同时匹配selectedId1和selectedId2）。
  • 行点击回调函数：表格A的回调更新selectedId1并重置selectedId2；表格B的回调更新selectedId2。

联动过滤与显示逻辑 #

• 初始状态：selectedId1、selectedId2均为空，仅渲染表格A，表格B、C隐藏或显示空状态提示。
• 表格A行点击：更新selectedId1，自动触发表格B的数据过滤（匹配id1），显示表格B；同时重置selectedId2，隐藏或清空表格C。
• 表格B行点击：更新selectedId2，自动触发表格C的数据过滤（同时匹配id1和id2），显示表格C。

额外优化点 #

• 根据selectedId1、selectedId2的状态，动态控制表格的显示/隐藏，减少无效渲染。
• 给B、C表格添加空数据提示，当过滤后无匹配结果时，友好提示用户。

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