From a8b2318d1f86d8f15d29c89e4f63ac0d7e3f57d8 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 7 Sep 2021 23:18:16 +0800
Subject: [PATCH] fix: table title not work

---
 components/table/demo/custom-filter-panel.vue |  6 +--
 components/table/demo/edit-cell.vue           | 43 +++++++--------
 components/table/demo/edit-row.vue            | 54 +++++++++----------
 components/table/demo/ellipsis.vue            |  6 +++
 components/vc-table/Cell/index.tsx            | 28 +++++-----
 site/debugger/index.tsx                       |  2 +-
 6 files changed, 73 insertions(+), 66 deletions(-)

diff --git a/components/table/demo/custom-filter-panel.vue b/components/table/demo/custom-filter-panel.vue
index 475fac1b9..8682ca57c 100644
--- a/components/table/demo/custom-filter-panel.vue
+++ b/components/table/demo/custom-filter-panel.vue
@@ -55,7 +55,6 @@ Implement a customized column search example via `customFilterDropdown`.
     </template>
     <template #bodyCell="{ text, column }">
       <span v-if="searchText && searchedColumn === column.dataIndex">
-        {{ searchText }}{{ searchedColumn }} {{ column.dataIndex }}
         <template
           v-for="(fragment, i) in text
             .toString()
@@ -80,7 +79,7 @@ Implement a customized column search example via `customFilterDropdown`.
 
 <script>
 import { SearchOutlined } from '@ant-design/icons-vue';
-import { defineComponent, reactive, ref } from 'vue';
+import { defineComponent, reactive, ref, toRefs } from 'vue';
 const data = [
   {
     key: '1',
@@ -174,9 +173,8 @@ export default defineComponent({
       columns,
       handleSearch,
       handleReset,
-      searchText: '',
       searchInput,
-      searchedColumn: '',
+      ...toRefs(state),
     };
   },
 });
diff --git a/components/table/demo/edit-cell.vue b/components/table/demo/edit-cell.vue
index 4c77222bc..e93c90803 100644
--- a/components/table/demo/edit-cell.vue
+++ b/components/table/demo/edit-cell.vue
@@ -19,26 +19,29 @@ Table with editable cells.
 <template>
   <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button>
   <a-table bordered :data-source="dataSource" :columns="columns">
-    <template #name="{ text, record }">
-      <div class="editable-cell">
-        <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
-          <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
-          <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
+    <template #bodyCell="{ column, text, record }">
+      <template v-if="column.dataIndex === 'name'">
+        <div class="editable-cell">
+          <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
+            <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
+            <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
+          </div>
+          <div v-else class="editable-cell-text-wrapper">
+            {{ text || ' ' }}
+            <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
+          </div>
         </div>
-        <div v-else class="editable-cell-text-wrapper">
-          {{ text || ' ' }}
-          <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
-        </div>
-      </div>
-    </template>
-    <template #operation="{ record }">
-      <a-popconfirm
-        v-if="dataSource.length"
-        title="Sure to delete?"
-        @confirm="onDelete(record.key)"
-      >
-        <a>Delete</a>
-      </a-popconfirm>
+      </template>
+      <template v-else-if="column.dataIndex === 'operation'">
+        <a-popconfirm
+          v-if="dataSource.length"
+          title="Sure to delete?"
+          @confirm="onDelete(record.key)"
+        >
+          <a>Delete</a>
+        </a-popconfirm>
+      </template>
+      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>
@@ -65,7 +68,6 @@ export default defineComponent({
         title: 'name',
         dataIndex: 'name',
         width: '30%',
-        slots: { customRender: 'name' },
       },
       {
         title: 'age',
@@ -78,7 +80,6 @@ export default defineComponent({
       {
         title: 'operation',
         dataIndex: 'operation',
-        slots: { customRender: 'operation' },
       },
     ];
     const dataSource: Ref<DataItem[]> = ref([
diff --git a/components/table/demo/edit-row.vue b/components/table/demo/edit-row.vue
index fb84f95cf..636c8d3f8 100644
--- a/components/table/demo/edit-row.vue
+++ b/components/table/demo/edit-row.vue
@@ -17,30 +17,32 @@ Table with editable rows.
 
 <template>
   <a-table :columns="columns" :data-source="dataSource" bordered>
-    <template v-for="col in ['name', 'age', 'address']" #[col]="{ text, record }" :key="col">
-      <div>
-        <a-input
-          v-if="editableData[record.key]"
-          v-model:value="editableData[record.key][col]"
-          style="margin: -5px 0"
-        />
-        <template v-else>
-          {{ text }}
-        </template>
-      </div>
-    </template>
-    <template #operation="{ record }">
-      <div class="editable-row-operations">
-        <span v-if="editableData[record.key]">
-          <a @click="save(record.key)">Save</a>
-          <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
-            <a>Cancel</a>
-          </a-popconfirm>
-        </span>
-        <span v-else>
-          <a @click="edit(record.key)">Edit</a>
-        </span>
-      </div>
+    <template #bodyCell="{ column, text, record }">
+      <template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
+        <div>
+          <a-input
+            v-if="editableData[record.key]"
+            v-model:value="editableData[record.key][column.dataIndex]"
+            style="margin: -5px 0"
+          />
+          <template v-else>
+            {{ text }}
+          </template>
+        </div>
+      </template>
+      <template v-else-if="column.dataIndex === 'operation'">
+        <div class="editable-row-operations">
+          <span v-if="editableData[record.key]">
+            <a @click="save(record.key)">Save</a>
+            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
+              <a>Cancel</a>
+            </a-popconfirm>
+          </span>
+          <span v-else>
+            <a @click="edit(record.key)">Edit</a>
+          </span>
+        </div>
+      </template>
     </template>
   </a-table>
 </template>
@@ -53,24 +55,20 @@ const columns = [
     title: 'name',
     dataIndex: 'name',
     width: '25%',
-    slots: { customRender: 'name' },
   },
   {
     title: 'age',
     dataIndex: 'age',
     width: '15%',
-    slots: { customRender: 'age' },
   },
   {
     title: 'address',
     dataIndex: 'address',
     width: '40%',
-    slots: { customRender: 'address' },
   },
   {
     title: 'operation',
     dataIndex: 'operation',
-    slots: { customRender: 'operation' },
   },
 ];
 interface DataItem {
diff --git a/components/table/demo/ellipsis.vue b/components/table/demo/ellipsis.vue
index b053c35f7..996d441b9 100644
--- a/components/table/demo/ellipsis.vue
+++ b/components/table/demo/ellipsis.vue
@@ -23,6 +23,12 @@ Ellipsis cell content via setting `column.ellipsis`.
     <template #name="{ text }">
       <a>{{ text }}</a>
     </template>
+    <template #bodyCell="{ column, text }">
+      <template v-if="column.dataIndex === 'name'">
+        <a>{{ text }}</a>
+      </template>
+      <template v-else>{{ text }}</template>
+    </template>
   </a-table>
 </template>
 <script lang="ts">
diff --git a/components/vc-table/Cell/index.tsx b/components/vc-table/Cell/index.tsx
index 23d713a94..c26c6826b 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 { isValidElement, parseStyleText } from '../../_util/props-util';
+import { flattenChildren, isValidElement, parseStyleText } from '../../_util/props-util';
 import type { CSSProperties, HTMLAttributes } from 'vue';
-import { defineComponent } from 'vue';
+import { defineComponent, isVNode } from 'vue';
 
 import type {
   DataIndex,
@@ -142,13 +142,15 @@ export default defineComponent<CellProps>({
         }
 
         if (cellType === 'body' && contextSlots.value.bodyCell && !column.slots?.customRender) {
-          childNode = contextSlots.value.bodyCell({
-            text: value,
-            value,
-            record,
-            index,
-            column: column.__originColumn__,
-          });
+          childNode = flattenChildren(
+            contextSlots.value.bodyCell({
+              text: value,
+              value,
+              record,
+              index,
+              column: column.__originColumn__,
+            }) as any,
+          );
         }
       }
 
@@ -165,6 +167,9 @@ export default defineComponent<CellProps>({
         childNode = <span class={`${cellPrefixCls}-content`}>{childNode}</span>;
       }
 
+      if (Array.isArray(childNode) && childNode.length === 1) {
+        childNode = childNode[0];
+      }
       const {
         colSpan: cellColSpan,
         rowSpan: cellRowSpan,
@@ -204,11 +209,10 @@ export default defineComponent<CellProps>({
       let title: string;
       const ellipsisConfig: CellEllipsisType = ellipsis === true ? { showTitle: true } : ellipsis;
       if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
-        debugger;
         if (typeof childNode === 'string' || typeof childNode === 'number') {
           title = childNode.toString();
-        } else if (isValidElement(childNode) && typeof childNode.props.children === 'string') {
-          title = childNode.props.children;
+        } else if (isVNode(childNode) && typeof childNode.children === 'string') {
+          title = childNode.children;
         }
       }
 
diff --git a/site/debugger/index.tsx b/site/debugger/index.tsx
index 97eb17118..00582956a 100644
--- a/site/debugger/index.tsx
+++ b/site/debugger/index.tsx
@@ -1,5 +1,5 @@
 // debugger tsx
-import Demo from '../../components/table/demo/custom-filter-panel.vue';
+import Demo from '../../components/table/demo/expand-children.vue';
 
 export default {
   render() {