From bf2f6390ad6135dc1f485ea8229e0544fdf8fed1 Mon Sep 17 00:00:00 2001
From: LanceJiang <lancejiangwei@qq.com>
Date: Fri, 15 Sep 2023 15:56:26 +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(=E7=B1=BBcustomRender)=20customHeade?=
 =?UTF-8?q?rRender=20=E6=96=B9=E6=B3=95=20=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E6=94=AF=E6=8C=81=20(#3030)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

示例见: /comp/table/multipleHeader
---
 src/components/Table/src/BasicTable.vue       |  4 ++-
 .../src/components/EditTableHeaderIcon.vue    |  2 +-
 .../Table/src/components/HeaderCell.vue       | 32 +++++++++++++------
 src/components/Table/src/types/table.ts       |  2 ++
 src/views/demo/table/tableData.tsx            | 17 ++++++++++
 5 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 03d8798d..50b61d5b 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -26,7 +26,9 @@
         <slot :name="item" v-bind="data || {}"></slot>
       </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 98240c07..ed05c31f 100644
--- a/src/components/Table/src/components/EditTableHeaderIcon.vue
+++ b/src/components/Table/src/components/EditTableHeaderIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span class="edit-header-cell">
     <slot></slot>
     {{ title }}
     <FormOutlined />
diff --git a/src/components/Table/src/components/HeaderCell.vue b/src/components/Table/src/components/HeaderCell.vue
index c21bfd04..e906beff 100644
--- a/src/components/Table/src/components/HeaderCell.vue
+++ b/src/components/Table/src/components/HeaderCell.vue
@@ -1,11 +1,4 @@
-<template>
-  <EditTableHeaderCell v-if="getIsEdit">
-    {{ getTitle }}
-  </EditTableHeaderCell>
-  <span v-else>{{ getTitle }}</span>
-  <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
-</template>
-<script lang="ts">
+<script lang="tsx">
   import type { PropType } from 'vue';
   import type { BasicColumn } from '../types/table';
   import { defineComponent, computed } from 'vue';
@@ -29,10 +22,29 @@
       const { prefixCls } = useDesign('basic-table-header-cell');
 
       const getIsEdit = computed(() => !!props.column?.edit);
-      const getTitle = computed(() => props.column?.customTitle || props.column?.title);
+      const getTitle = computed(() => {
+        const column = props.column;
+        if (typeof column.customHeaderRender === 'function') {
+          return column.customHeaderRender(props.column);
+        }
+        return props.column?.customTitle || props.column?.title;
+      });
       const getHelpMessage = computed(() => props.column?.helpMessage);
 
-      return { prefixCls, getIsEdit, getTitle, getHelpMessage };
+      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>
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
index 6276daf8..937b0e96 100644
--- a/src/components/Table/src/types/table.ts
+++ b/src/components/Table/src/types/table.ts
@@ -430,6 +430,8 @@ 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;
 
diff --git a/src/views/demo/table/tableData.tsx b/src/views/demo/table/tableData.tsx
index 20d3975f..de7308e2 100644
--- a/src/views/demo/table/tableData.tsx
+++ b/src/views/demo/table/tableData.tsx
@@ -2,6 +2,8 @@ import { optionsListApi } from '/@/api/demo/select';
 import { FormProps, FormSchema } from '/@/components/Table';
 import { BasicColumn } from '/@/components/Table/src/types/table';
 import { VxeFormItemProps, VxeGridPropTypes } from '/@/components/VxeTable';
+import { ref } from 'vue';
+import { Input } from 'ant-design-vue';
 
 export function getBasicColumns(): BasicColumn[] {
   return [
@@ -73,6 +75,7 @@ export function getBasicShortColumns(): BasicColumn[] {
 }
 
 export function getMultipleHeaderColumns(): BasicColumn[] {
+  const testRef = ref('姓名:');
   return [
     {
       title: 'ID',
@@ -81,6 +84,11 @@ export function getMultipleHeaderColumns(): BasicColumn[] {
     },
     {
       title: '姓名',
+      customHeaderRender() {
+        return (
+          <Input placeholder="输入值 更新 自定义title" size="small" v-model:value={testRef.value} />
+        );
+      },
       dataIndex: 'name',
       width: 120,
     },
@@ -91,6 +99,15 @@ export function getMultipleHeaderColumns(): BasicColumn[] {
       children: [
         {
           title: '编号',
+          customHeaderRender(column) {
+            // 【自定义渲染的】
+            return (
+              <div>
+                _ <span style="background: #f00; color: #fff;">{testRef.value}</span> _
+                {column.customTitle}
+              </div>
+            );
+          },
           dataIndex: 'no',
           width: 120,
           filters: [