feat: use renderSlot

components/table/context.ts

@@ -3,17 +3,17 @@ import { computed } from 'vue';
 import { inject, provide } from 'vue';
 
 export type ContextSlots = {
-  emptyText?: (...args: any[]) => void;
+  emptyText?: (...args: any[]) => any;
-  expandIcon?: (...args: any[]) => void;
+  expandIcon?: (...args: any[]) => any;
-  title?: (...args: any[]) => void;
+  title?: (...args: any[]) => any;
-  footer?: (...args: any[]) => void;
+  footer?: (...args: any[]) => any;
-  summary?: (...args: any[]) => void;
+  summary?: (...args: any[]) => any;
-  bodyCell?: (...args: any[]) => void;
+  bodyCell?: (...args: any[]) => any;
-  headerCell?: (...args: any[]) => void;
+  headerCell?: (...args: any[]) => any;
-  customFilterIcon?: (...args: any[]) => void;
+  customFilterIcon?: (...args: any[]) => any;
-  customFilterDropdown?: (...args: any[]) => void;
+  customFilterDropdown?: (...args: any[]) => any;
   // 兼容 2.x 的 columns slots 配置
-  [key: string]: (...args: any[]) => void;
+  [key: string]: (...args: any[]) => any;
 };
 
 export type ContextProps = ComputedRef<ContextSlots>;

components/table/demo/ajax.vue

@@ -30,7 +30,6 @@ This example shows how to fetch and present data from a remote server, and how t
   >
     <template #bodyCell="{ column, text }">
       <template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
-      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>

components/table/demo/basic.vue

@@ -17,14 +17,13 @@ Simple table with actions.
 
 <template>
   <a-table :columns="columns" :data-source="data">
-    <template #headerCell="{ title, column }">
+    <template #headerCell="{ column }">
       <template v-if="column.key === 'name'">
         <span>
           <smile-outlined />
           Name
         </span>
       </template>
-      <template v-else>{{ title }}</template>
     </template>
 
     <template #bodyCell="{ column, record }">
@@ -56,7 +55,6 @@ Simple table with actions.
           </a>
         </span>
       </template>
-      <template v-else>{{ record.name }}</template>
     </template>
   </a-table>
 </template>

components/table/demo/bordered.vue

@@ -21,7 +21,6 @@ Add border, title and footer for table.
       <template v-if="column.dataIndex === 'name'">
         <a>{{ text }}</a>
       </template>
-      <template v-else>{{ text }}</template>
     </template>
     <template #title>Header</template>
     <template #footer>Footer</template>

components/table/demo/colspan-rowspan.vue

@@ -24,7 +24,6 @@ Table cell supports `colSpan` and `rowSpan` that set in render return object. Wh
       <template v-if="column.dataIndex === 'name'">
         <a href="javascript:;">{{ text }}</a>
       </template>
-      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>

components/table/demo/custom-filter-panel.vue

@@ -22,7 +22,6 @@ Implement a customized column search example via `customFilterDropdown`.
       <template v-if="column.key === 'name'">
         <span style="color: #1890ff">Name</span>
       </template>
-      <template v-else>{{ column.title }}</template>
     </template>
     <template
       #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
@@ -70,9 +69,6 @@ Implement a customized column search example via `customFilterDropdown`.
           <template v-else>{{ fragment }}</template>
         </template>
       </span>
-      <template v-else>
-        {{ text }}
-      </template>
     </template>
   </a-table>
 </template>

components/table/demo/edit-cell.vue

@@ -41,7 +41,6 @@ Table with editable cells.
           <a>Delete</a>
         </a-popconfirm>
       </template>
-      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>

components/table/demo/ellipsis.vue

@@ -24,7 +24,6 @@ Ellipsis cell content via setting `column.ellipsis`.
       <template v-if="column.dataIndex === 'name'">
         <a>{{ text }}</a>
       </template>
-      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>

components/table/demo/expand.vue

@@ -18,11 +18,10 @@ When there's too much information to show and the table can't display all at onc
 
 <template>
   <a-table :columns="columns" :data-source="data" :scroll="{ x: 2000 }">
-    <template #bodyCell="{ column, text }">
+    <template #bodyCell="{ column }">
       <template v-if="column.key === 'action'">
         <a>Delete</a>
       </template>
-      <template v-else>{{ text }}</template>
     </template>
     <template #expandedRowRender="{ record }">
       <p style="margin: 0">

components/table/demo/fixed-columns-header.vue

@@ -25,11 +25,10 @@ A Solution for displaying large amounts of data with long columns.
 
 <template>
   <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }">
-    <template #bodyCell="{ column, text }">
+    <template #bodyCell="{ column }">
       <template v-if="column.key === 'operation'">
         <a>action</a>
       </template>
-      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>

components/table/demo/fixed-columns.vue

@@ -26,11 +26,10 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
 
 <template>
   <a-table :columns="columns" :data-source="data" :scroll="{ x: 1300, y: 1000 }">
-    <template #bodyCell="{ column, text }">
+    <template #bodyCell="{ column }">
       <template v-if="column.key === 'operation'">
         <a>action</a>
       </template>
-      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>

components/table/demo/nested-table.vue

@@ -19,15 +19,14 @@ Showing more detailed info of every row.
 
 <template>
   <a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
-    <template #bodyCell="{ column, text }">
+    <template #bodyCell="{ column }">
       <template v-if="column.key === 'operation'">
         <a>Publish</a>
       </template>
-      <template v-else>{{ text }}</template>
     </template>
     <template #expandedRowRender>
       <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
-        <template #bodyCell="{ column, text }">
+        <template #bodyCell="{ column }">
           <template v-if="column.key === 'state'">
             <span>
               <a-badge status="success" />
@@ -52,7 +51,6 @@ Showing more detailed info of every row.
               </a-dropdown>
             </span>
           </template>
-          <template v-else>{{ text }}</template>
         </template>
       </a-table>
     </template>

components/table/demo/row-selection.vue

@@ -22,7 +22,6 @@ selection happens when clicking checkbox defaultly. You can see https://codesand
       <template v-if="column.dataIndex === 'name'">
         <a>{{ text }}</a>
       </template>
-      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>

components/table/hooks/useColumns.tsx

@@ -1,4 +1,5 @@
 import devWarning from '../../vc-util/devWarning';
+import { renderSlot } from 'vue';
 import type { Ref } from 'vue';
 import type { ContextSlots } from '../context';
 import type { TransformColumns, ColumnsType } from '../interface';
@@ -23,10 +24,15 @@ function fillSlots<RecordType>(columns: ColumnsType<RecordType>, contextSlots: R
     });
 
     if (contextSlots.value.headerCell && !column.slots?.title) {
-      cloneColumn.title = contextSlots.value.headerCell({
+      cloneColumn.title = renderSlot(
+        contextSlots.value,
+        'headerCell',
+        {
           title: column.title,
           column,
-      });
+        },
+        () => [column.title as any],
+      );
     }
     if ('children' in cloneColumn) {
       cloneColumn.children = fillSlots(cloneColumn.children, contextSlots);

components/vc-table/Cell/index.tsx

@@ -1,7 +1,7 @@
 import classNames from '../../_util/classNames';
 import { flattenChildren, isValidElement, parseStyleText } from '../../_util/props-util';
 import type { CSSProperties, HTMLAttributes } from 'vue';
-import { defineComponent, isVNode } from 'vue';
+import { defineComponent, isVNode, renderSlot } from 'vue';
 
 import type {
   DataIndex,
@@ -152,15 +152,19 @@ export default defineComponent<CellProps>({
           contextSlots.value.bodyCell &&
           !column.slots?.customRender
         ) {
-          childNode = flattenChildren(
+          const child = renderSlot(
-            contextSlots.value.bodyCell({
+            contextSlots.value,
+            'bodyCell',
+            {
               text: value,
               value,
               record,
               index,
               column: column.__originColumn__,
-            }) as any,
+            },
+            () => [childNode],
           );
+          childNode = flattenChildren(child as any);
         }
         /** maybe we should @deprecated */
         if (props.transformCellText) {