From 2667981e4c0c451ded88e06f412dd4bcb5ec41dc Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 26 Nov 2025 16:40:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20table=E6=8B=96=E6=8B=BD=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E5=90=8E=E9=87=8D=E6=96=B0=E6=B8=B2=E6=9F=93=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/table/Table.vue          |  5 ++---
 packages/form/src/table/useSortable.ts     | 10 +++++++++-
 packages/form/src/table/useTableColumns.ts |  6 +++---
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/form/src/table/Table.vue b/packages/form/src/table/Table.vue
index e5f8fa7b..7cdb9ce2 100644
--- a/packages/form/src/table/Table.vue
+++ b/packages/form/src/table/Table.vue
@@ -133,16 +133,15 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
 );
 
 const { nextZIndex } = useZIndex();
+const updateKey = ref(1);
 
 const { addable, newHandler } = useAdd(props, emit);
 const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
-useSortable(props, emit, tMagicTableRef, modelName);
+useSortable(props, emit, tMagicTableRef, modelName, updateKey);
 const { isFullscreen, toggleFullscreen } = useFullscreen();
 const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
 const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
 
-const updateKey = ref(1);
-
 const data = computed(() => (props.config.pagination ? paginationData.value : props.model[modelName.value]));
 
 const toggleMode = () => {
diff --git a/packages/form/src/table/useSortable.ts b/packages/form/src/table/useSortable.ts
index 90b979be..4d54280d 100644
--- a/packages/form/src/table/useSortable.ts
+++ b/packages/form/src/table/useSortable.ts
@@ -1,4 +1,4 @@
-import { inject, type Ref, type ShallowRef, watchEffect } from 'vue';
+import { inject, nextTick, type Ref, type ShallowRef, watchEffect } from 'vue';
 import Sortable, { type SortableEvent } from 'sortablejs';
 
 import { type TMagicTable } from '@tmagic/design';
@@ -13,6 +13,7 @@ export const useSortable = (
   emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
   tMagicTableRef: ShallowRef<InstanceType<typeof TMagicTable> | null>,
   modelName: Ref<string | number>,
+  updateKey: Ref<number>,
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
 
@@ -36,6 +37,13 @@ export const useSortable = (
 
         emit('change', newData);
         mForm?.$emit('field-change', newData);
+
+        sortable?.destroy();
+        sortable = undefined;
+
+        nextTick(() => {
+          updateKey.value += 1;
+        });
       },
     });
   };
diff --git a/packages/form/src/table/useTableColumns.ts b/packages/form/src/table/useTableColumns.ts
index e8378a8b..26edc129 100644
--- a/packages/form/src/table/useTableColumns.ts
+++ b/packages/form/src/table/useTableColumns.ts
@@ -107,7 +107,7 @@ export const useTableColumns = (
       actionFixed = props.config.fixed;
     }
 
-    const actionClumn = {
+    const actionColumn = {
       props: {
         label: '操作',
         fixed: actionFixed,
@@ -133,7 +133,7 @@ export const useTableColumns = (
     };
 
     if (actionFixed !== 'right') {
-      columns.push(actionClumn);
+      columns.push(actionColumn);
     }
 
     if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) {
@@ -237,7 +237,7 @@ export const useTableColumns = (
     }
 
     if (actionFixed === 'right') {
-      columns.push(actionClumn);
+      columns.push(actionColumn);
     }
 
     return columns;