From a50684cb31c26fe6a52997150522212369fddff6 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 15 Sep 2021 15:56:22 +0800
Subject: [PATCH] feat: use renderSlot

---
 components/table/context.ts                   | 20 +++++++++----------
 components/table/demo/ajax.vue                |  1 -
 components/table/demo/basic.vue               |  4 +---
 components/table/demo/bordered.vue            |  1 -
 components/table/demo/colspan-rowspan.vue     |  1 -
 components/table/demo/custom-filter-panel.vue |  4 ----
 components/table/demo/edit-cell.vue           |  1 -
 components/table/demo/ellipsis.vue            |  1 -
 components/table/demo/expand.vue              |  3 +--
 .../table/demo/fixed-columns-header.vue       |  3 +--
 components/table/demo/fixed-columns.vue       |  3 +--
 components/table/demo/nested-table.vue        |  6 ++----
 components/table/demo/row-selection.vue       |  1 -
 components/table/hooks/useColumns.tsx         | 14 +++++++++----
 components/vc-table/Cell/index.tsx            | 12 +++++++----
 15 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/components/table/context.ts b/components/table/context.ts
index e9d1528a4..21017a2c5 100644
--- a/components/table/context.ts
+++ b/components/table/context.ts
@@ -3,17 +3,17 @@ import { computed } from 'vue';
 import { inject, provide } from 'vue';
 
 export type ContextSlots = {
-  emptyText?: (...args: any[]) => void;
-  expandIcon?: (...args: any[]) => void;
-  title?: (...args: any[]) => void;
-  footer?: (...args: any[]) => void;
-  summary?: (...args: any[]) => void;
-  bodyCell?: (...args: any[]) => void;
-  headerCell?: (...args: any[]) => void;
-  customFilterIcon?: (...args: any[]) => void;
-  customFilterDropdown?: (...args: any[]) => void;
+  emptyText?: (...args: any[]) => any;
+  expandIcon?: (...args: any[]) => any;
+  title?: (...args: any[]) => any;
+  footer?: (...args: any[]) => any;
+  summary?: (...args: any[]) => any;
+  bodyCell?: (...args: any[]) => any;
+  headerCell?: (...args: any[]) => any;
+  customFilterIcon?: (...args: any[]) => any;
+  customFilterDropdown?: (...args: any[]) => any;
   // 兼容 2.x 的 columns slots 配置
-  [key: string]: (...args: any[]) => void;
+  [key: string]: (...args: any[]) => any;
 };
 
 export type ContextProps = ComputedRef<ContextSlots>;
diff --git a/components/table/demo/ajax.vue b/components/table/demo/ajax.vue
index 5cc3b39c1..139efaa7b 100644
--- a/components/table/demo/ajax.vue
+++ b/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>
diff --git a/components/table/demo/basic.vue b/components/table/demo/basic.vue
index 61c07f278..b426fe374 100644
--- a/components/table/demo/basic.vue
+++ b/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>
diff --git a/components/table/demo/bordered.vue b/components/table/demo/bordered.vue
index 3a09b253d..d6c589d86 100644
--- a/components/table/demo/bordered.vue
+++ b/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>
diff --git a/components/table/demo/colspan-rowspan.vue b/components/table/demo/colspan-rowspan.vue
index 5d8ec4f37..d890526ef 100644
--- a/components/table/demo/colspan-rowspan.vue
+++ b/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>
diff --git a/components/table/demo/custom-filter-panel.vue b/components/table/demo/custom-filter-panel.vue
index 8682ca57c..dc45d4759 100644
--- a/components/table/demo/custom-filter-panel.vue
+++ b/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>
diff --git a/components/table/demo/edit-cell.vue b/components/table/demo/edit-cell.vue
index e93c90803..602ed736c 100644
--- a/components/table/demo/edit-cell.vue
+++ b/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>
diff --git a/components/table/demo/ellipsis.vue b/components/table/demo/ellipsis.vue
index f55362801..76c46a8a7 100644
--- a/components/table/demo/ellipsis.vue
+++ b/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>
diff --git a/components/table/demo/expand.vue b/components/table/demo/expand.vue
index 6dc4616fc..5526b16d5 100644
--- a/components/table/demo/expand.vue
+++ b/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">
diff --git a/components/table/demo/fixed-columns-header.vue b/components/table/demo/fixed-columns-header.vue
index 8e7f985fe..5ad7d7c26 100644
--- a/components/table/demo/fixed-columns-header.vue
+++ b/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>
diff --git a/components/table/demo/fixed-columns.vue b/components/table/demo/fixed-columns.vue
index 5ea725e22..8ddd7d556 100644
--- a/components/table/demo/fixed-columns.vue
+++ b/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>
diff --git a/components/table/demo/nested-table.vue b/components/table/demo/nested-table.vue
index 5c716de37..e60e436db 100644
--- a/components/table/demo/nested-table.vue
+++ b/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>
diff --git a/components/table/demo/row-selection.vue b/components/table/demo/row-selection.vue
index fd632a120..00706cde1 100644
--- a/components/table/demo/row-selection.vue
+++ b/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>
diff --git a/components/table/hooks/useColumns.tsx b/components/table/hooks/useColumns.tsx
index f5deb5711..86712bf9b 100644
--- a/components/table/hooks/useColumns.tsx
+++ b/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({
-        title: column.title,
-        column,
-      });
+      cloneColumn.title = renderSlot(
+        contextSlots.value,
+        'headerCell',
+        {
+          title: column.title,
+          column,
+        },
+        () => [column.title as any],
+      );
     }
     if ('children' in cloneColumn) {
       cloneColumn.children = fillSlots(cloneColumn.children, contextSlots);
diff --git a/components/vc-table/Cell/index.tsx b/components/vc-table/Cell/index.tsx
index 4627b8a3c..8682f4ff7 100644
--- a/components/vc-table/Cell/index.tsx
+++ b/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(
-            contextSlots.value.bodyCell({
+          const child = renderSlot(
+            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) {