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

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