fix: table template error

Author: tangjinzhou

components/table/Table.tsx

@@ -44,14 +44,14 @@ import type { PropType } from 'vue';
 import { computed, defineComponent, ref, toRef, watchEffect } from 'vue';
 import type { DefaultRecordType } from '../vc-table/interface';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
-import { convertChildrenToColumns } from '../vc-table/hooks/useColumns';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
 import classNames from '../_util/classNames';
 import omit from '../_util/omit';
 import { initDefaultProps } from '../_util/props-util';
 import { ContextSlots, useProvideSlots } from './context';
 import useColumns from './hooks/useColumns';
+import { convertChildrenToColumns } from './util';
 
 export type { ColumnsType, TablePaginationConfig };
 

components/table/demo/template.vue

@@ -8,13 +8,17 @@ title:
 
 ## zh-CN
 
-使用 template 风格的 API
+使用 template 风格的 API。
+
+> 不推荐使用，会有一定的性能损耗。
 
 > 这个只是一个描述 `columns` 的语法糖，所以你不能用其他组件去包裹 `Column` 和 `ColumnGroup`。
 
 ## en-US
 
-Using template style API
+Using template style API.
+
+> Not recommended, there will be a certain performance loss.
 
 > Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components.
 

components/table/util.ts

@@ -1,4 +1,6 @@
-import type { ColumnType, ColumnTitle, ColumnTitleProps, Key } from './interface';
+import { camelize } from 'vue';
+import { flattenChildren } from '../_util/props-util';
+import type { ColumnType, ColumnsType, ColumnTitle, ColumnTitleProps, Key } from './interface';
 
 export function getColumnKey<RecordType>(column: ColumnType<RecordType>, defaultKey: string): Key {
   if ('key' in column && column.key !== undefined && column.key !== null) {
@@ -25,3 +27,37 @@ export function renderColumnTitle<RecordType>(
 
   return title;
 }
+
+export function convertChildrenToColumns<RecordType>(
+  elements: any[] = [],
+): ColumnsType<RecordType> {
+  const flattenElements = flattenChildren(elements);
+  const columns = [];
+  flattenElements.forEach(element => {
+    if (!element) {
+      return;
+    }
+    const key = element.key;
+    const style = element.props?.style || {};
+    const cls = element.props?.class || '';
+    const props = element.props || {};
+    for (const [k, v] of Object.entries(props)) {
+      props[camelize(k)] = v;
+    }
+    const { default: children, ...restSlots } = element.children || {};
+    const column = { ...restSlots, ...props, style, class: cls };
+    if (key) {
+      column.key = key;
+    }
+    if (element.type?.__ANT_TABLE_COLUMN_GROUP) {
+      column.children = convertChildrenToColumns(
+        typeof children === 'function' ? children() : children,
+      );
+    } else {
+      const customRender = element.children?.default;
+      column.customRender = column.customRender || customRender;
+    }
+    columns.push(column);
+  });
+  return columns;
+}

components/vc-table/hooks/useColumns.tsx

@@ -13,24 +13,6 @@ import type {
 } from '../interface';
 import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
 
-export function convertChildrenToColumns<RecordType>(
-  children: any[] = [],
-): ColumnsType<RecordType> {
-  return children.map(({ key, props }) => {
-    const { children: nodeChildren, ...restProps } = props;
-    const column = {
-      key,
-      ...restProps,
-    };
-
-    if (nodeChildren) {
-      column.children = convertChildrenToColumns(nodeChildren);
-    }
-
-    return column;
-  });
-}
-
 function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<RecordType>[] {
   return columns.reduce((list, column) => {
     const { fixed } = column;