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

@@ -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,41 +1,63 @@
-<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: {
-  column: {
+    EditTableHeaderCell,
-    type: Object as PropType<BasicColumn>,
+    BasicHelp,
-    default: () => ({}),
   },
-})
+  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)
+      return props.column?.customTitle || props.column?.title
-const getTitle = computed(() => props.column?.customTitle || props.column?.title)
+    })
-const getHelpMessage = computed(() => props.column?.helpMessage)
+    const getHelpMessage = computed(() => props.column?.helpMessage)
-</script>
 
-<template>
+    return () => {
-  <EditTableHeaderCell v-if="getIsEdit">
+      return (
-    {{ getTitle }}
+          <div>
-  </EditTableHeaderCell>
+            {getIsEdit.value
-  <span v-else>{{ getTitle }}</span>
+              ? (
-  <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
+              <EditTableHeaderCell>{getTitle.value}</EditTableHeaderCell>
-</template>
+                )
+              : (
+              <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} {
+  .@{prefix-cls} {
-  &__help {
+    &__help {
-    margin-left: 8px;
+      margin-left: 8px;
-    color: rgb(0 0 0 / 65%) !important;
+      color: rgb(0 0 0 / 65%) !important;
+    }
   }
-}
 </style>

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