feat: BasicTable 组件 HeaderCell 新增(类customRender) customHeaderRender 方法 自定义渲染支持 (#3030)

示例见: /comp/table/multipleHeader

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

src/components/Table/src/components/EditTableHeaderIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span class="edit-header-cell">
     <slot></slot>
     {{ title }}
     <FormOutlined />

src/components/Table/src/components/HeaderCell.vue

@@ -1,11 +1,4 @@
-<template>
+<script lang="tsx">
-  <EditTableHeaderCell v-if="getIsEdit">
-    {{ getTitle }}
-  </EditTableHeaderCell>
-  <span v-else>{{ getTitle }}</span>
-  <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
-</template>
-<script lang="ts">
   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>

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;
 

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: [