feat: use renderSlot

Author: tangjinzhou

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>;

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>