From e418130a66c54b7fed533977b1558e7206d729fb Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 19 Nov 2025 13:23:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(form,=20design,=20form-schema):=20table?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89title,table=20?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AEtitle=20tip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design/src/types.ts                  |  1 +
 packages/element-plus-adapter/src/Table.vue   |  3 ++
 packages/form-schema/src/base.ts              |  1 +
 packages/form/src/table/useTableColumns.ts    | 43 ++++++++++++++++++-
 .../tdesign-vue-next-adapter/src/Table.vue    |  6 +++
 5 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts
index b1871e2e..bc2abd72 100644
--- a/packages/design/src/types.ts
+++ b/packages/design/src/types.ts
@@ -347,6 +347,7 @@ export interface TableColumnOptions<T = any> {
     selectable?: (row: T, index: number) => boolean;
   };
   cell?: (scope: { row: T; $index: number }) => any;
+  title?: (scope?: any) => any;
 }
 
 export interface TabPaneProps {
diff --git a/packages/element-plus-adapter/src/Table.vue b/packages/element-plus-adapter/src/Table.vue
index e3b55717..d6657ac4 100644
--- a/packages/element-plus-adapter/src/Table.vue
+++ b/packages/element-plus-adapter/src/Table.vue
@@ -22,6 +22,9 @@
   >
     <template v-for="(item, columnIndex) in columns" :key="columnIndex">
       <ElTableColumn v-bind="item.props || {}">
+        <template #header="scope" v-if="item.title">
+          <component :is="item.title(scope)"></component>
+        </template>
         <template #default="scope" v-if="item.cell">
           <component :is="item.cell(scope)"></component>
         </template>
diff --git a/packages/form-schema/src/base.ts b/packages/form-schema/src/base.ts
index 6a309411..5faa2e2e 100644
--- a/packages/form-schema/src/base.ts
+++ b/packages/form-schema/src/base.ts
@@ -724,6 +724,7 @@ export interface TableConfig extends FormItem {
   enableFullscreen?: boolean;
   fixed?: boolean;
   itemExtra?: string | FilterFunction<string>;
+  titleTip?: FilterFunction<string>;
   rowKey?: string;
   /** table 新增行时前置回调 */
   beforeAddRow?: (mForm: FormState | undefined, data: any) => boolean;
diff --git a/packages/form/src/table/useTableColumns.ts b/packages/form/src/table/useTableColumns.ts
index ba975a0b..69db09d2 100644
--- a/packages/form/src/table/useTableColumns.ts
+++ b/packages/form/src/table/useTableColumns.ts
@@ -1,7 +1,8 @@
 import { computed, h, inject, type Ref } from 'vue';
+import { WarningFilled } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { TableColumnOptions } from '@tmagic/design';
+import { type TableColumnOptions, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 import type { FormState, TableColumnConfig } from '@tmagic/form-schema';
 
 import Container from '../containers/Container.vue';
@@ -43,6 +44,19 @@ export const useTableColumns = (
     return fuc;
   };
 
+  const titleTip = (fuc: any) => {
+    if (typeof fuc === 'function') {
+      return fuc(mForm, {
+        values: mForm?.initValues,
+        model: props.model,
+        formValue: mForm ? mForm.values : props.model,
+        prop: props.prop,
+      });
+    }
+
+    return fuc;
+  };
+
   const selection = computed(() => {
     if (typeof props.config.selection === 'function') {
       return props.config.selection(mForm, { model: props.model[modelName.value] });
@@ -158,6 +172,8 @@ export const useTableColumns = (
 
     for (const column of props.config.items) {
       if (column.type !== 'hidden' && display(column.display)) {
+        const titleTipValue = titleTip(column.titleTip);
+
         columns.push({
           props: {
             prop: column.name,
@@ -181,6 +197,31 @@ export const useTableColumns = (
               onChange: changeHandler,
               onAddDiffCount,
             }),
+          title: titleTipValue
+            ? () =>
+                h(
+                  TMagicTooltip,
+                  { placement: 'top' },
+                  {
+                    default: () =>
+                      h(
+                        'span',
+                        {
+                          style: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '5px',
+                          },
+                        },
+                        [h('span', column.label), h(TMagicIcon, {}, { default: () => h(WarningFilled) })],
+                      ),
+                    content: () =>
+                      h('div', {
+                        innerHTML: titleTipValue,
+                      }),
+                  },
+                )
+            : undefined,
         });
       }
     }
diff --git a/packages/tdesign-vue-next-adapter/src/Table.vue b/packages/tdesign-vue-next-adapter/src/Table.vue
index d7544cae..dda7bc36 100644
--- a/packages/tdesign-vue-next-adapter/src/Table.vue
+++ b/packages/tdesign-vue-next-adapter/src/Table.vue
@@ -67,6 +67,12 @@ const tableColumns = computed(() => {
       };
     }
 
+    if (item.title) {
+      column.title = (h: any, data: any) => {
+        return item.title?.(data);
+      };
+    }
+
     columns.push(column);
   }