chore(restore table): n

n

Author: carolin913

packages/components/table/PrimaryTable.tsx

@@ -11,7 +11,6 @@ import useSorter from './hooks/useSorter';
 import useFilter from './hooks/useFilter';
 import useDragSort from './hooks/useDragSort';
 import useAsyncLoading from './hooks/useAsyncLoading';
-// import useStickyMultiHeader from './hooks/useStickyMultiHeader';
 import { PageInfo, PaginationProps } from '../pagination';
 import useClassName from './hooks/useClassName';
 import useStyle from './hooks/useStyle';
@@ -68,14 +67,6 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
 
   const { renderTitleWidthIcon } = useTableHeader({ columns: props.columns });
   const { renderAsyncLoading } = useAsyncLoading(props);
-  
-  // 多级表头sticky效果
-  // const { clearStickyStyles } = useStickyMultiHeader({
-  //   columns: props.columns,
-  //   isMultipleHeader: !!props.columns.some(col => col.children?.length),
-  //   tableContentRef: primaryTableRef,
-  //   enabled: props.stickyMultiHeader !== false, // 默认启用，可通过props禁用
-  // });
 
   const primaryTableClasses = {
     [tableDraggableClasses.colDraggable]: isColDraggable,

packages/components/table/_example/multi-header.tsx

@@ -47,13 +47,105 @@ export default function TableExample() {
   const [headerAffixedTop, setHeaderAffixedTop] = useState(false);
   const [stickyMultiHeader, setStickyMultiHeader] = useState(true);
   const [sort, setSort] = useState<TableSort>({ sortBy: 'default', descending: false });
+  const tableContainerRef = useRef<HTMLDivElement>(null);
 
   const onSortChange: TableProps['onSortChange'] = (sortInfo, context) => {
     setSort(sortInfo);
     setData([...context.currentDataSource]);
     console.log(context);
   };
 
+  // 多级表头粘性定位逻辑
+  useEffect(() => {
+    if (!stickyMultiHeader || !tableContainerRef.current) return;
+
+    const tableContainer = tableContainerRef.current;
+    const tableContent = tableContainer.querySelector('.t-table__content') as HTMLElement;
+
+    if (!tableContent) return;
+
+    const handleScroll = () => {
+      const scrollLeft = tableContent.scrollLeft;
+      const thead = tableContainer.querySelector('.t-table__header--multiple') as HTMLElement;
+
+      if (!thead) return;
+
+      // 获取所有顶级表头单元格（有colspan的）
+      const topLevelHeaders = thead.querySelectorAll('tr:first-child th[colspan]') as NodeListOf<HTMLElement>;
+
+      let accumulatedWidth = 0;
+
+      topLevelHeaders.forEach((header) => {
+        const colKey = header.getAttribute('data-colkey');
+        if (!colKey) return;
+
+        const cellInner = header.querySelector('.t-table__th-cell-inner') as HTMLElement;
+        if (!cellInner) return;
+
+        // 获取表头相对于表格容器的位置
+        const headerLeft = header.offsetLeft;
+        const headerWidth = header.offsetWidth;
+        const headerRight = headerLeft + headerWidth;
+
+        // 判断是否需要粘性定位：表头的左边已经滚动出视野，但右边还在视野内
+        const shouldStick = scrollLeft > headerLeft && scrollLeft < headerRight;
+
+        if (shouldStick) {
+          // 计算粘性位置，确保不超出表头边界
+          const maxLeft = headerWidth - 120; // 预留最小显示宽度
+          const stickyLeft = Math.min(scrollLeft - headerLeft, maxLeft);
+
+          console.log('shouldStick', headerLeft, headerRight, scrollLeft, stickyLeft);
+          // 应用粘性样式
+          cellInner.style.position = 'relative';
+          cellInner.style.left = `${stickyLeft}px`;
+          cellInner.style.zIndex = '10';
+        } else {
+          // 移除粘性样式
+          cellInner.style.position = '';
+          cellInner.style.left = '';
+          cellInner.style.zIndex = '';
+        }
+      });
+    };
+
+    // 节流处理
+    let ticking = false;
+    const throttledScroll = () => {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          handleScroll();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    tableContent.addEventListener('scroll', throttledScroll);
+
+    // 初始化执行
+    handleScroll();
+
+    return () => {
+      tableContent.removeEventListener('scroll', throttledScroll);
+
+      // 清理样式
+      const thead = tableContainer.querySelector('.t-table__header--multiple') as HTMLElement;
+      if (thead) {
+        const cellInners = thead.querySelectorAll('.t-table__th-cell-inner') as NodeListOf<HTMLElement>;
+        cellInners.forEach((cellInner) => {
+          cellInner.style.position = '';
+          cellInner.style.left = '';
+          cellInner.style.zIndex = '';
+          cellInner.style.backgroundColor = '';
+          cellInner.style.boxShadow = '';
+          cellInner.style.borderRight = '';
+          cellInner.style.minWidth = '';
+        });
+      }
+    };
+  }, [stickyMultiHeader]);
+
   const columns: TableProps['columns'] = [
     {
       title: '申请人',
@@ -66,7 +158,6 @@ export default function TableExample() {
       fixed: fixedLeftCol ? 'left' : undefined,
       width: 100,
       colKey: 'total_info',
-      className: stickyMultiHeader ? 'sticky-multi-header' : undefined,
       children: [
         {
           align: 'left',
@@ -113,11 +204,31 @@ export default function TableExample() {
         },
       ],
     },
+    {
+      colKey: 'field1',
+      title: '住宿费',
+      width: 100,
+    },
+    {
+      colKey: 'field3',
+      title: '交通费',
+      width: 100,
+    },
+    {
+      colKey: 'field4',
+      title: '物料费',
+      width: 100,
+    },
+    {
+      colKey: 'field2',
+      title: '奖品激励费',
+      width: 120,
+    },
     {
       title: '审批汇总',
       colKey: 'instruction',
       fixed: fixedRightCol ? 'right' : undefined,
-      className: stickyMultiHeader ? 'sticky-multi-header' : undefined,
+      width: 100,
       children: [
         {
           align: 'left',
@@ -160,26 +271,6 @@ export default function TableExample() {
         },
       ],
     },
-    {
-      colKey: 'field1',
-      title: '住宿费',
-      width: 300,
-    },
-    {
-      colKey: 'field3',
-      title: '交通费',
-      width: 300,
-    },
-    {
-      colKey: 'field4',
-      title: '物料费',
-      width: 300,
-    },
-    {
-      colKey: 'field2',
-      title: '奖品激励费',
-      width: 120,
-    },
     {
       colKey: 'createTime',
       title: '申请时间',
@@ -188,14 +279,7 @@ export default function TableExample() {
     },
   ];
   return (
-    <div>
-      <style>{`
-        /* 多级表头粘性定位CSS */
-        .enable-sticky-multi-header .sticky-multi-header {
-          position: sticky;
-          left: 0;
-        }
-      `}</style>
+    <div ref={tableContainerRef}>
       <Space direction="vertical" size="large" style={{ width: '100%' }}>
         {/* <!-- 按钮操作区域 --> */}
         <Space>
@@ -231,7 +315,6 @@ export default function TableExample() {
           sort={sort}
           onSortChange={onSortChange}
           lazyLoad
-          className={stickyMultiHeader ? 'enable-sticky-multi-header' : undefined}
         />
       </Space>
     </div>

packages/components/table/interface.ts

@@ -34,13 +34,8 @@ export interface BaseTableProps<T extends TableRowData = TableRowData> extends T
  */
 export type SimpleTableProps<T extends TableRowData = TableRowData> = BaseTableProps<T>;
 
-export interface PrimaryTableProps<T extends TableRowData = TableRowData> extends TdPrimaryTableProps<T>, StyledProps {
-  /**
-   * 多级表头滚动时是否启用粘性定位效果，让上级表头在滚动时保持可见
-   * @default true
-   */
-  stickyMultiHeader?: boolean;
-}
+export interface PrimaryTableProps<T extends TableRowData = TableRowData> extends TdPrimaryTableProps<T>, StyledProps {}
+
 export interface EnhancedTableProps<T extends TableRowData = TableRowData>
   extends TdEnhancedTableProps<T>,
     StyledProps {}

packages/components/table/style/css.js

@@ -1,2 +1 @@
 import './index.css';
-import './sticky-multi-header.css';