From 7c73beb3098f08ab0b75f3ab59ba8ba6480a8fa9 Mon Sep 17 00:00:00 2001
From: Carl Chen <71313168+cc-hearts@users.noreply.github.com>
Date: Tue, 30 Jan 2024 12:06:45 +0800
Subject: [PATCH] fix: fixed an error caused by dragging under the `headerCell`
 slot. (#7291)

* fix: fix headerCell slots

* perf: optimize table columnTitle type
---
 components/table/hooks/useColumns.tsx | 4 ++--
 components/table/interface.tsx        | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/table/hooks/useColumns.tsx b/components/table/hooks/useColumns.tsx
index aab022e25..3f1a5304b 100644
--- a/components/table/hooks/useColumns.tsx
+++ b/components/table/hooks/useColumns.tsx
@@ -1,10 +1,10 @@
 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';
 import { SELECTION_COLUMN } from './useSelection';
 import { EXPAND_COLUMN } from '../../vc-table';
+import { customRenderSlot } from '../../_util/vnode';
 
 function fillSlots<RecordType>(columns: ColumnsType<RecordType>, contextSlots: Ref<ContextSlots>) {
   const $slots = contextSlots.value;
@@ -27,7 +27,7 @@ function fillSlots<RecordType>(columns: ColumnsType<RecordType>, contextSlots: R
     });
 
     if (contextSlots.value.headerCell && !column.slots?.title) {
-      cloneColumn.title = renderSlot(
+      cloneColumn.title = customRenderSlot(
         contextSlots.value,
         'headerCell',
         {
diff --git a/components/table/interface.tsx b/components/table/interface.tsx
index 1cb05c11e..9f620049d 100644
--- a/components/table/interface.tsx
+++ b/components/table/interface.tsx
@@ -13,7 +13,7 @@ import type { Breakpoint } from '../_util/responsiveObserve';
 import type { INTERNAL_SELECTION_ITEM } from './hooks/useSelection';
 import type { VueNode } from '../_util/type';
 import { tuple } from '../_util/type';
-import type { CSSProperties } from 'vue';
+import type { CSSProperties, VNodeArrayChildren } from 'vue';
 // import { TableAction } from './Table';
 
 export type { GetRowKey, ExpandableConfig };
@@ -68,7 +68,10 @@ export interface ColumnTitleProps<RecordType> {
   filters?: Record<string, FilterValue>;
 }
 
-export type ColumnTitle<RecordType> = VueNode | ((props: ColumnTitleProps<RecordType>) => VueNode);
+type ColumnTitleNode = VueNode | VNodeArrayChildren;
+export type ColumnTitle<RecordType> =
+  | ColumnTitleNode
+  | ((props: ColumnTitleProps<RecordType>) => ColumnTitleNode);
 
 export type FilterValue = (Key | boolean)[];
 export type FilterKey = Key[] | null;