如何实现svelte-headless-table与svelte-gantt的双向数据联动

核心思路是通过共享响应式状态打通两个组件的数据流转，让表格的筛选/选择操作同步到甘特图，同时甘特图的任务修改反向同步回表格。

一、表格操作（筛选/选择）同步到甘特图 #

1. 维护共享展示数据集
   在父组件中定义响应式变量或Svelte Store，存储甘特图需展示的任务数据：

   <script>
     import { writable, derived } from 'svelte/store';
     // 原始全量任务数据
     const rawTasks = writable([/* 初始任务数据 */]);
     // 表格筛选后的行数据
     let filteredTableRows = [];
     // 表格选中的行数据
     let selectedTableRows = [];
     // 甘特图最终展示数据集（结合筛选+选择逻辑）
     const ganttTasks = derived(
       [rawTasks],
       () => {
         // 逻辑可自定义：优先展示选中项，无选中则展示筛选结果
         return selectedTableRows.length > 0 
           ? selectedTableRows.map(row => row.original) 
           : filteredTableRows.map(row => row.original);
       }
     );
   </script>
   

2. 绑定表格状态到共享数据
   利用svelte-headless-table的内置API，监听筛选和选择状态变化，同步更新变量：

   <!-- 表格组件 -->
   <Table {data} bind:filteredRows={filteredTableRows} bind:selectedRows={selectedTableRows}>
     <!-- 列定义、筛选器、选择框等配置 -->
   </Table>
   
   <!-- 甘特图组件直接使用共享数据集 -->
   <SvelteGantt tasks={$ganttTasks} />
   

二、甘特图任务修改同步回表格 #

1. 监听甘特图修改事件
   利用svelte-gantt提供的task-move、task-resize等事件，捕获任务修改后的最新数据：

   <SvelteGantt 
     tasks={$ganttTasks}
     on:task-move={handleTaskUpdate}
     on:task-resize={handleTaskUpdate}
   />
   

2. 更新原始数据集
   在事件处理函数中，定位原始数据中对应的任务项并更新字段。由于原始数据是响应式的，表格会自动同步更新：

   <script>
     function handleTaskUpdate(event) {
       const updatedTask = event.detail.task;
       rawTasks.update(tasks => {
         return tasks.map(task => {
           if (task.id === updatedTask.id) {
             return { ...task, start: updatedTask.start, end: updatedTask.end };
           }
           return task;
         });
       });
     }
   </script>
   

关键注意事项 #

• 字段映射一致性：确保表格与甘特图的任务字段（如id、start、end、title）完全匹配，避免同步失败。
• 复杂状态组合：若需处理多条件筛选、多选、分页等场景，用derived store封装逻辑，减少组件内冗余代码。
• 性能优化：数据量较大时，优先做局部字段更新，避免全量替换触发重复渲染。

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