From 69ac90fe22778fedb9e35b95595428395fd65cc5 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 1 Dec 2025 21:09:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(form):=20table=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=8B=96=E5=8A=A8=E6=93=8D=E4=BD=9C=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=8E=92=E5=BA=8F=E8=80=8C=E4=B8=8D=E6=98=AF?=
 =?UTF-8?q?=E6=8B=96=E5=8A=A8=E6=95=B4=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form-schema/src/base.ts           |  1 +
 packages/form/src/table/ActionsColumn.vue  | 10 +++++++++-
 packages/form/src/table/Table.vue          |  6 +++++-
 packages/form/src/table/useSortable.ts     |  1 +
 packages/form/src/table/useTableColumns.ts |  2 +-
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/form-schema/src/base.ts b/packages/form-schema/src/base.ts
index c7634776..0ca48531 100644
--- a/packages/form-schema/src/base.ts
+++ b/packages/form-schema/src/base.ts
@@ -721,6 +721,7 @@ export interface TableConfig extends FormItem {
   defaultSort?: SortProp;
   /** 是否支持拖拽排序 */
   dropSort?: boolean;
+  dropSortHandle?: boolean;
   /** 是否显示全屏按钮 */
   enableFullscreen?: boolean;
   fixed?: boolean | 'left' | 'right';
diff --git a/packages/form/src/table/ActionsColumn.vue b/packages/form/src/table/ActionsColumn.vue
index f6976cb3..85d6e1ab 100644
--- a/packages/form/src/table/ActionsColumn.vue
+++ b/packages/form/src/table/ActionsColumn.vue
@@ -1,5 +1,13 @@
 <template>
   <slot name="operateCol" :scope="{ $index: index, row: row }"></slot>
+  <TMagicButton
+    v-if="config.dropSort && config.dropSortHandle"
+    :class="{ 'tmagic-form-table-drag-target': config.dropSortHandle }"
+    :icon="Sort"
+    link
+    size="small"
+    title="拖动排序"
+  ></TMagicButton>
   <TMagicButton
     v-show="showDelete(index + 1 + currentPage * pageSize - 1)"
     size="small"
@@ -24,7 +32,7 @@
 
 <script setup lang="ts">
 import { inject } from 'vue';
-import { Delete, DocumentCopy } from '@element-plus/icons-vue';
+import { Delete, DocumentCopy, Sort } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
 import { TMagicButton } from '@tmagic/design';
diff --git a/packages/form/src/table/Table.vue b/packages/form/src/table/Table.vue
index 7cdb9ce2..fd110e6a 100644
--- a/packages/form/src/table/Table.vue
+++ b/packages/form/src/table/Table.vue
@@ -8,7 +8,11 @@
     >
       <div class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
         <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
-        <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
+        <TMagicTooltip
+          content="拖拽可排序"
+          placement="left-start"
+          :disabled="config.dropSort !== true && !config.dropSortHandle"
+        >
           <TMagicTable
             v-if="model[modelName]"
             ref="tMagicTable"
diff --git a/packages/form/src/table/useSortable.ts b/packages/form/src/table/useSortable.ts
index 4d54280d..fb8bda19 100644
--- a/packages/form/src/table/useSortable.ts
+++ b/packages/form/src/table/useSortable.ts
@@ -30,6 +30,7 @@ export const useSortable = (
       filter: 'input', // 表单组件选字操作和触发拖拽会冲突，优先保证选字操作
       preventOnFilter: false, // 允许选字
       direction: 'vertical',
+      handle: props.config.dropSortHandle ? '.tmagic-form-table-drag-target' : undefined,
       onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
         if (typeof newIndex === 'undefined') return;
         if (typeof oldIndex === 'undefined') return;
diff --git a/packages/form/src/table/useTableColumns.ts b/packages/form/src/table/useTableColumns.ts
index 26edc129..b2c1cae4 100644
--- a/packages/form/src/table/useTableColumns.ts
+++ b/packages/form/src/table/useTableColumns.ts
@@ -111,7 +111,7 @@ export const useTableColumns = (
       props: {
         label: '操作',
         fixed: actionFixed,
-        width: props.config.operateColWidth || 112,
+        width: props.config.operateColWidth ?? (props.config.dropSortHandle && props.config.dropSort ? 132 : 112),
         align: 'center',
       },
       cell: ({ row, $index }: any) =>