feat: BasicTable 组件 HeaderCell 新增 customHeaderRender

src/components/Table/src/BasicTable.vue

@@ -298,7 +298,9 @@ emit('register', tableAction, formActions)
         <slot :name="item" v-bind="data || {}" />
       </template>
       <template #headerCell="{ column }">
+        <slot name="headerCell" v-bind="{ column }">
           <HeaderCell :column="column" />
+        </slot>
       </template>
       <!-- 增加对antdv3.x兼容 -->
       <template #bodyCell="data">

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

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

@@ -1,33 +1,55 @@
-<script lang="ts" setup>
+<script lang="tsx">
-import { computed } from 'vue'
+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' })
+export default defineComponent({
-
+  name: 'TableHeaderCell',
-const props = defineProps({
+  components: {
+    EditTableHeaderCell,
+    BasicHelp,
+  },
+  props: {
     column: {
       type: Object as PropType<BasicColumn>,
       default: () => ({}),
     },
-})
+  },
-
+  setup(props) {
     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 getHelpMessage = computed(() => props.column?.helpMessage)
+      const column = props.column
-</script>
+      if (typeof column.customHeaderRender === 'function')
+        return column.customHeaderRender(props.column)
 
-<template>
+      return props.column?.customTitle || props.column?.title
-  <EditTableHeaderCell v-if="getIsEdit">
+    })
-    {{ getTitle }}
+    const getHelpMessage = computed(() => props.column?.helpMessage)
-  </EditTableHeaderCell>
+
-  <span v-else>{{ getTitle }}</span>
+    return () => {
-  <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
+      return (
-</template>
+          <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';

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