feat(form, design, form-schema): table支持自定义title,table 表单组件支持配置title tip

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 {

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>

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;

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,
         });
       }
     }

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);
   }