fix(Table): 处理 Column.formatter 返回循环依赖对象的情况

WeBankFinTech · May 15, 2024 · 5dc4204 · 5dc4204
1 parent bf93ab3
commit 5dc4204
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/components/_util/utils.ts b/components/_util/utils.ts
@@ -168,3 +168,14 @@ export function concat(arr: any[], arr2: any[]) {
     }
     return arr;
 }
+
+// JSON.stringify
+export function stringify(value: any, onError?: (err: unknown) => void, fallbackValue: string = ''): string {
+    try {
+        const str = JSON.stringify(value);
+        return str;
+    } catch (err) {
+        onError?.(err);
+        return fallbackValue;
+    }
+}
diff --git a/components/table/components/cell.tsx b/components/table/components/cell.tsx
@@ -14,6 +14,7 @@ import { provideKey } from '../const';
 
 import type { ActionType } from '../interface';
 import type { ColumnInst } from '../column';
+import { stringify } from '../../_util/utils';
 
 const cellProps = {
     row: {
@@ -40,8 +41,10 @@ const cellProps = {
 
 export type InnerCellProps = ExtractPropTypes<typeof cellProps>;
 
+const COMPONENT_NAME = 'FTableCell';
+
 export default defineComponent({
-    name: 'FTableCell',
+    name: COMPONENT_NAME,
     props: cellProps,
     setup(props) {
         const { prefixCls } = inject(provideKey);
@@ -102,13 +105,14 @@ export default defineComponent({
             const result = formatterResult ?? cellValue;
             Object.assign(ellipsisProps, { content: result });
             return hasEllipsis
-                ? (
-                    <Ellipsis {...ellipsisProps}></Ellipsis>
-                    )
+                ? <Ellipsis {...ellipsisProps} />
                 : (
                     <Fragment>
                         {typeof result === 'object'
-                            ? JSON.stringify(result)
+                            ? stringify(
+                                result,
+                                (err) => console.warn(`[${COMPONENT_NAME}]: render error occurred due to \n`, err),
+                            )
                             : result}
                     </Fragment>
                     );