shadcn-svelte Reactive Table行删改后无法动态更新的问题

核心问题分析 #

1. 静态数据源导致不响应：你使用readable(assessments)创建表格数据源，但readable是只读Store，只会初始化一次，不会追踪后续assessments的变化。
2. 本地数据未同步更新：删除API调用成功后，没有更新本地的assessments数组，表格无法感知数据变化。

分步解决方案 #

1. 让表格数据源响应数据变化

在DataTable组件中，用Svelte的响应式语句$:包裹表格实例的创建，确保assessments更新时重新生成表格：

<script lang="ts">
  import { createTable, addTableFilter } from '@tanstack/svelte-table';
  import DataTableActions from './DataTableActions.svelte';
  import type { Template } from '$lib/types';

  export let assessments: Template[];
  // 新增：接收父组件的删除回调
  export let onDelete: (id: string) => Promise<void>;

  // 用$: 确保assessments变化时重新创建表格
  $: table = createTable(readable(assessments), {
    filter: addTableFilter({
      fn: ({ filterValue, value }) => value.toLowerCase().includes(filterValue.toLowerCase())
    }),
  });

  // 同样让columns随table重新生成
  $: columns = table.createColumns([
    table.column({ accessor: 'Title', header: 'Title' }),
    table.column({
      accessor: ({ id }) => id,
      header: '',
      cell: ({ value }) => {
        return createRender(DataTableActions, { id: value, onDelete });
      },
      plugins: { sort: { disable: true }, filter: { exclude: true } }
    })
  ]);
</script>

2. 父组件维护数据状态并更新

在+page.svelte中，将assessments设为响应式变量，删除成功后过滤掉已删除的项：

<script lang="ts">
  import DataTable from '$lib/components/DataTable.svelte';
  import type { Template } from '$lib/types';

  // 用$state声明响应式数据
  let assessments: Template[] = [];

  // 从API加载初始数据
  export async function load({ fetch }) {
    const res = await fetch('/api/server/assessments');
    assessments = await res.json();
  }

  // 父组件的删除逻辑：调用API后更新本地数据
  async function handleDelete(id: string) {
    const response = await fetch(`/api/server/assessment`, {
      method: 'DELETE',
      body: JSON.stringify({ templateId: id }),
      headers: { 'Content-Type': 'application/json' }
    });

    if (response.ok) {
      // 过滤掉被删除的项，触发组件更新
      assessments = assessments.filter(item => item.id !== id);
    }
  }
</script>

<DataTable {assessments} onDelete={handleDelete} />

3. 修改操作组件传递删除回调

更新DataTableActions.svelte，调用父组件传入的删除函数：

<script lang="ts">
  import { AlertDialog } from '@shadcn-svelte/ui';
  import { Button } from '@shadcn-svelte/ui';

  export let id: string;
  export let onDelete: (id: string) => Promise<void>;
</script>

<AlertDialog.Root>
  <AlertDialog.Trigger asChild let:builder>
    <Button builders={[builder]} variant="ghost" class="h-8 w-full justify-start">Delete</Button>
  </AlertDialog.Trigger>

  <AlertDialog.Content>
    <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
    <AlertDialog.Description>
      This action cannot be undone. The assessment will be permanently deleted.
    </AlertDialog.Description>
    <div class="flex justify-end gap-2 mt-4">
      <AlertDialog.Cancel asChild>
        <Button variant="secondary">Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action asChild>
        <Button variant="destructive" on:click={() => onDelete(id)}>Continue</Button>
      </AlertDialog.Action>
    </div>
  </AlertDialog.Content>
</AlertDialog.Root>

关键要点 #

• 用$:响应式语句确保表格实例随数据源更新
• 始终在API操作成功后同步更新本地数据
• 通过回调函数实现父子组件间的状态同步

内容的提问来源于stack exchange，提问作者Prashant Pandurang Kharade