From afd2d946c5dc598e13fc019c3affd07738bfaa57 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Mon, 18 Sep 2023 17:57:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20BasicTable=20=E7=BB=84=E4=BB=B6=20Heade?=
 =?UTF-8?q?rCell=20=E6=96=B0=E5=A2=9E=20customHeaderRender?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/src/BasicTable.vue       |  4 +-
 .../src/components/EditTableHeaderIcon.vue    |  2 +-
 .../Table/src/components/HeaderCell.vue       | 78 ++++++++++++-------
 src/components/Table/src/types/table.ts       |  3 +
 4 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index fec7460d..885bc840 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -298,7 +298,9 @@ emit('register', tableAction, formActions)
         <slot :name="item" v-bind="data || {}" />
       </template>
       <template #headerCell="{ column }">
-        <HeaderCell :column="column" />
+        <slot name="headerCell" v-bind="{ column }">
+          <HeaderCell :column="column" />
+        </slot>
       </template>
       <!-- 增加对antdv3.x兼容 -->
       <template #bodyCell="data">
diff --git a/src/components/Table/src/components/EditTableHeaderIcon.vue b/src/components/Table/src/components/EditTableHeaderIcon.vue
index dae765f8..2eff2b76 100644
--- a/src/components/Table/src/components/EditTableHeaderIcon.vue
+++ b/src/components/Table/src/components/EditTableHeaderIcon.vue
@@ -7,7 +7,7 @@ defineProps({ title: { type: String, default: '' } })
 </script>
 
 <template>
-  <span>
+  <span class="edit-header-cell">
     <slot />
     {{ title }}
     <FormOutlined />
diff --git a/src/components/Table/src/components/HeaderCell.vue b/src/components/Table/src/components/HeaderCell.vue
index ae710819..343d7b12 100644
--- a/src/components/Table/src/components/HeaderCell.vue
+++ b/src/components/Table/src/components/HeaderCell.vue
@@ -1,41 +1,63 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
+<script lang="tsx">
+import type { PropType } from 'vue'
+import { computed, defineComponent } from 'vue'
 import type { BasicColumn } from '../types/table'
+import BasicHelp from '/@/components/Basic/src/BasicHelp.vue'
 import EditTableHeaderCell from './EditTableHeaderIcon.vue'
-import BasicHelp from '@/components/Basic/src/BasicHelp.vue'
 import { useDesign } from '@/hooks/web/useDesign'
 
-defineOptions({ name: 'TableHeaderCell' })
-
-const props = defineProps({
-  column: {
-    type: Object as PropType<BasicColumn>,
-    default: () => ({}),
+export default defineComponent({
+  name: 'TableHeaderCell',
+  components: {
+    EditTableHeaderCell,
+    BasicHelp,
   },
-})
+  props: {
+    column: {
+      type: Object as PropType<BasicColumn>,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const { prefixCls } = useDesign('basic-table-header-cell')
 
-const { prefixCls } = useDesign('basic-table-header-cell')
+    const getIsEdit = computed(() => !!props.column?.edit)
+    const getTitle = computed(() => {
+      const column = props.column
+      if (typeof column.customHeaderRender === 'function')
+        return column.customHeaderRender(props.column)
 
-const getIsEdit = computed(() => !!props.column?.edit)
-const getTitle = computed(() => props.column?.customTitle || props.column?.title)
-const getHelpMessage = computed(() => props.column?.helpMessage)
-</script>
+      return props.column?.customTitle || props.column?.title
+    })
+    const getHelpMessage = computed(() => props.column?.helpMessage)
 
-<template>
-  <EditTableHeaderCell v-if="getIsEdit">
-    {{ getTitle }}
-  </EditTableHeaderCell>
-  <span v-else>{{ getTitle }}</span>
-  <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
-</template>
+    return () => {
+      return (
+          <div>
+            {getIsEdit.value
+              ? (
+              <EditTableHeaderCell>{getTitle.value}</EditTableHeaderCell>
+                )
+              : (
+              <span class="default-header-cell">{getTitle.value}</span>
+                )}
+            {getHelpMessage.value && (
+              <BasicHelp text={getHelpMessage.value} class={`${prefixCls}__help`} />
+            )}
+          </div>
+      )
+    }
+  },
+})
+</script>
 
 <style lang="less">
-@prefix-cls: ~'@{namespace}-basic-table-header-cell';
+  @prefix-cls: ~'@{namespace}-basic-table-header-cell';
 
-.@{prefix-cls} {
-  &__help {
-    margin-left: 8px;
-    color: rgb(0 0 0 / 65%) !important;
+  .@{prefix-cls} {
+    &__help {
+      margin-left: 8px;
+      color: rgb(0 0 0 / 65%) !important;
+    }
   }
-}
 </style>
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
index a3c1334c..deb3a0e5 100644
--- a/src/components/Table/src/types/table.ts
+++ b/src/components/Table/src/types/table.ts
@@ -418,6 +418,9 @@ export interface BasicColumn extends ColumnProps<Recordable> {
 
   slots?: Recordable
 
+  // 自定义header渲染
+  customHeaderRender?: (column: BasicColumn) => string | VNodeChild | JSX.Element
+
   // Whether to hide the column by default, it can be displayed in the column configuration
   defaultHidden?: boolean