feat(TableColumn): formatter 支持返回 VNode

WeBankFinTech · Apr 23, 2024 · 30af41d · 30af41d
1 parent 8d73ef4
commit 30af41d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/components/table/components/cell.tsx b/components/table/components/cell.tsx
@@ -2,6 +2,7 @@ import {
     defineComponent,
     Fragment,
     inject,
+    isVNode,
     type PropType,
     type ExtractPropTypes,
     type ComponentObjectPropsOptions,
@@ -88,7 +89,15 @@ export default defineComponent({
                     <Fragment>{column.slots.default(props)}</Fragment>
                 );
             }
-            const result = column?.props?.formatter?.(props) ?? cellValue;
+            const formatterResult = column?.props?.formatter?.(props);
+            if (isVNode(formatterResult)) {
+                return (
+                    <Fragment>
+                        {formatterResult}
+                    </Fragment>
+                );
+            }
+            const result = formatterResult ?? cellValue;
             Object.assign(ellipsisProps, { content: result });
             return hasEllipsis ? (
                 <Ellipsis {...ellipsisProps}></Ellipsis>

diff --git a/docs/.vitepress/components/table/customContent.vue b/docs/.vitepress/components/table/customContent.vue
@@ -63,14 +63,24 @@ export default defineComponent({
             },
             {
                 prop: 'name',
-                label: '姓名',
+                label: '姓名1',
                 render: ({ row }) => {
                     return h(FTag, {}, () => row.name);
                 },
             },
+            {
+                prop: 'name',
+                label: '姓名2',
+                formatter: ({ row }) => {
+                    return h(FTag, {}, () => row.name);
+                },
+            },
             {
                 prop: 'address',
                 label: '地址',
+                formatter: ({ row }) => {
+                    return row.address;
+                },
             },
             {
                 prop: 'action',