refactor: hide original thead

Author: RylanBot

packages/components/table/BaseTable.tsx

@@ -306,6 +306,9 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
       })}
     </colgroup>
   );
+
+  const theadStyle = useMemo(() => (showAffixHeader ? { opacity: 0 } : undefined), [showAffixHeader]);
+
   const headProps: TheadProps = {
     isFixedHeader,
     rowAndColFixedPosition,
@@ -338,6 +341,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     props.bordered,
     props.resizable,
     props.size,
+    theadStyle,
   ];
 
   // 多级表头左边线缺失
@@ -518,7 +522,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
         {renderColGroup(false)}
         {useMemo(() => {
           if (!showHeader) return null;
-          return <THead {...{ ...headProps, thWidthList: resizable ? thWidthList.current : {} }} />;
+          return <THead {...{ ...headProps, theadStyle, thWidthList: resizable ? thWidthList.current : {} }} />;
           // eslint-disable-next-line
         }, headUseMemoDependencies)}
 

packages/components/table/THead.tsx

@@ -1,15 +1,17 @@
-import React, { useRef, MutableRefObject, CSSProperties, useMemo } from 'react';
-import { isFunction } from 'lodash-es';
+import React, { CSSProperties, MutableRefObject, useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import { getColumnFixedStyles } from './hooks/useFixed';
-import { RowAndColFixedPosition } from './interface';
-import { TableColumns, ThRowspanAndColspan } from './hooks/useMultiHeader';
+import { isFunction } from 'lodash-es';
+
+import TEllipsis from './Ellipsis';
 import useClassName from './hooks/useClassName';
-import { BaseTableCol, TableRowData, TdBaseTableProps } from './type';
+import { getColumnFixedStyles } from './hooks/useFixed';
 import { renderTitle } from './hooks/useTableHeader';
-import TEllipsis from './Ellipsis';
 import { formatClassNames } from './utils';
-import { AttachNode } from '../common';
+
+import type { AttachNode } from '../common';
+import type { TableColumns, ThRowspanAndColspan } from './hooks/useMultiHeader';
+import type { RowAndColFixedPosition } from './interface';
+import type { BaseTableCol, TableRowData, TdBaseTableProps } from './type';
 
 export interface TheadProps {
   classPrefix: string;
@@ -33,6 +35,7 @@ export interface TheadProps {
   resizable?: boolean;
   attach?: AttachNode;
   showColumnShadow?: { left: boolean; right: boolean };
+  theadStyle?: CSSProperties;
   columnResizeParams?: {
     resizeLineRef: MutableRefObject<HTMLDivElement>;
     resizeLineStyle: CSSProperties;
@@ -195,7 +198,7 @@ export default function THead(props: TheadProps) {
   };
 
   return (
-    <thead ref={theadRef} className={classNames(theadClasses)}>
+    <thead ref={theadRef} className={classNames(theadClasses)} style={props.theadStyle}>
       {renderThNodeList(props.rowAndColFixedPosition, props.thWidthList)}
     </thead>
   );

packages/components/table/__tests__/__snapshots__/pagination.test.tsx.snap

@@ -160,6 +160,7 @@ exports[`BaseTable Pagination > locale data pagination controlled > pagination.c
       </colgroup>
       <thead
         class="t-table__header"
+        style="opacity: 0;"
       >
         <tr>
           <th

packages/components/table/__tests__/__snapshots__/vitest-table.test.jsx.snap

@@ -25,6 +25,7 @@ exports[`BaseTable Component > props.showHeader: BaseTable contains element \`th
         </colgroup>
         <thead
           class="t-table__header"
+          style="opacity: 0;"
         >
           <tr>
             <th
@@ -180,6 +181,7 @@ exports[`BaseTable Component > props.size is equal to large 1`] = `
         </colgroup>
         <thead
           class="t-table__header"
+          style="opacity: 0;"
         >
           <tr>
             <th
@@ -335,6 +337,7 @@ exports[`BaseTable Component > props.size is equal to medium 1`] = `
         </colgroup>
         <thead
           class="t-table__header"
+          style="opacity: 0;"
         >
           <tr>
             <th
@@ -490,6 +493,7 @@ exports[`BaseTable Component > props.size is equal to small 1`] = `
         </colgroup>
         <thead
           class="t-table__header"
+          style="opacity: 0;"
         >
           <tr>
             <th
@@ -639,6 +643,7 @@ exports[`BaseTable Component > props.tableLayout is equal to auto 1`] = `
         </colgroup>
         <thead
           class="t-table__header"
+          style="opacity: 0;"
         >
           <tr>
             <th
@@ -794,6 +799,7 @@ exports[`BaseTable Component > props.tableLayout is equal to fixed 1`] = `
         </colgroup>
         <thead
           class="t-table__header"
+          style="opacity: 0;"
         >
           <tr>
             <th