feat: crud2中自适应高度使用粘性定位固定表头 (#11637)

* feat: crud2中自适应高度使用粘性定位固定表头 * feat: crud2中自适应高度使用粘性定位固定表头
baidu · Feb 20, 2025 · a39a5a3 · a39a5a3
1 parent b594a93
commit a39a5a3
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 7 deletions.
diff --git a/packages/amis-ui/scss/components/_table2.scss b/packages/amis-ui/scss/components/_table2.scss
@@ -619,6 +619,26 @@
     .#{$ns}Table-header {
       padding: 0;
     }
+
+    &-self-sticky {
+      position: relative !important;
+
+      .#{$ns}Table-content {
+        overflow-x: unset !important;
+      }
+
+      .#{$ns}Table-row {
+        z-index: 1;
+      }
+
+      .#{$ns}Table-cell-self-sticky {
+        z-index: 2 !important;
+      }
+
+      .#{$ns}Table-cell-fix-left {
+        z-index: 3 !important;
+      }
+    }
   }
 
   &.#{$ns}Table-ping-left {

diff --git a/packages/amis-ui/src/components/table/Cell.tsx b/packages/amis-ui/src/components/table/Cell.tsx
@@ -14,6 +14,7 @@ const zIndex = 1;
 
 export interface Props extends ThemeProps {
   fixed?: string | boolean; // left | right
+  selfSticky?: boolean;
   rowSpan?: number | any;
   colSpan?: number | any;
   key?: string | number;
@@ -33,6 +34,7 @@ export interface Props extends ThemeProps {
 export default class BodyCell extends React.PureComponent<Props> {
   static defaultProps = {
     fixed: '',
+    selfSticky: false,
     wrapperComponent: 'td',
     rowSpan: null,
     colSpan: null
@@ -41,6 +43,7 @@ export default class BodyCell extends React.PureComponent<Props> {
   render() {
     const {
       fixed,
+      selfSticky,
       rowSpan,
       colSpan,
       children,
@@ -54,16 +57,27 @@ export default class BodyCell extends React.PureComponent<Props> {
       testIdBuilder
     } = this.props;
 
+    let _style: object = {...style};
+
+    if (fixed || selfSticky) {
+      _style = {
+        position: 'sticky',
+        zIndex,
+        ..._style
+      };
+    }
+
     return (
       <Component
         rowSpan={rowSpan && rowSpan > 1 ? rowSpan : null}
         colSpan={colSpan && colSpan > 1 ? colSpan : null}
         className={cx('Table-cell', className, {
           [cx(`Table-cell-fix-${fixed}`)]: fixed,
+          [`Table-cell-self-sticky`]: selfSticky,
           [`text-${column?.align}`]: column?.align,
           [`align-${column?.vAlign}`]: column?.vAlign
         })}
-        style={fixed ? {position: 'sticky', zIndex, ...style} : {...style}}
+        style={_style}
         data-depth={depth || null}
         data-col={col}
         {...testIdBuilder?.getTestId()}

diff --git a/packages/amis-ui/src/components/table/Head.tsx b/packages/amis-ui/src/components/table/Head.tsx
@@ -9,7 +9,8 @@ import {
   getBuildColumns,
   getAllSelectableRows,
   updateFixedRow,
-  hasFixedColumn
+  hasFixedColumn,
+  updateStickyRow
 } from './util';
 import {
   ColumnProps,
@@ -50,6 +51,7 @@ export interface Props extends ThemeProps {
   onFilter?: Function;
   onResizeMouseDown: Function;
   testIdBuilder?: TestIdBuilder;
+  selfSticky?: boolean;
 }
 
 export default class Head extends React.PureComponent<Props> {
@@ -83,7 +85,7 @@ export default class Head extends React.PureComponent<Props> {
   }
 
   updateFixedRow() {
-    const {classnames: cx} = this.props;
+    const {classnames: cx, selfSticky} = this.props;
     const thead = this.domRef.current;
     const children = thead?.children;
     for (let i = 0; i < (children?.length || 0); i++) {
@@ -92,6 +94,10 @@ export default class Head extends React.PureComponent<Props> {
         this.prependColumns(cols);
       }
 
+      if (selfSticky) {
+        updateStickyRow(children as HTMLCollection, i);
+      }
+
       if (hasFixedColumn(cols)) {
         updateFixedRow(children?.[i] as HTMLTableRowElement, cols, cx);
       }
@@ -134,7 +140,8 @@ export default class Head extends React.PureComponent<Props> {
       onFilter,
       onResizeMouseDown,
       testIdBuilder,
-      className
+      className,
+      selfSticky
     } = this.props;
 
     const {thColumns, tdColumns} = getBuildColumns(columns);
@@ -307,6 +314,7 @@ export default class Head extends React.PureComponent<Props> {
                     colSpan={item.colSpan}
                     classnames={cx}
                     classPrefix={classPrefix}
+                    selfSticky={selfSticky}
                     fixed={item.fixed === true ? 'left' : item.fixed}
                     className={cx({
                       'Table-cell-last': thIndex === maxCount

diff --git a/packages/amis-ui/src/components/table/index.tsx b/packages/amis-ui/src/components/table/index.tsx
@@ -690,7 +690,9 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       onSelectAll,
       onFilter,
       testIdBuilder,
-      headerClassName
+      headerClassName,
+      sticky,
+      autoFillHeight
     } = this.props;
 
     const rowSelectionKeyField = this.getRowSelectionKeyField();
@@ -705,6 +707,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
     return (
       <Head
         key="thead"
+        selfSticky={sticky && !!autoFillHeight}
         columns={columns}
         draggable={!!draggable}
         selectable={!!rowSelection}
@@ -1649,6 +1652,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       resizable,
       columns,
       sticky,
+      autoFillHeight,
       classnames: cx
     } = this.props;
 
@@ -1677,10 +1681,15 @@ export class Table extends React.PureComponent<TableProps, TableState> {
           </div>
         ) : null}
 
-        {hasScrollY || sticky ? (
+        {hasScrollY || (sticky && !autoFillHeight) ? (
           this.renderScrollTable()
         ) : (
-          <div className={cx('Table-container')} ref={this.containerDom}>
+          <div
+            className={cx('Table-container', {
+              [cx('Table-container-self-sticky')]: sticky && !!autoFillHeight
+            })}
+            ref={this.containerDom}
+          >
             {this.renderTable()}
           </div>
         )}

diff --git a/packages/amis-ui/src/components/table/util.ts b/packages/amis-ui/src/components/table/util.ts
@@ -225,6 +225,18 @@ function getPreviousLeftWidth(
   return width;
 }
 
+function getPreviousTopHeight(thead: HTMLCollection, rowIndex: number) {
+  let height = 0;
+
+  for (let i = 0; i < rowIndex; i++) {
+    if (thead && thead[i]) {
+      const dom = thead[i] as HTMLElement;
+      height += dom.offsetHeight;
+    }
+  }
+  return height;
+}
+
 function getAfterRightWidth(
   doms: HTMLCollection,
   index: number,
@@ -292,6 +304,18 @@ export function updateFixedRow(
   }
 }
 
+// 更新一个tr下的th的top
+export function updateStickyRow(thead: HTMLCollection, rowIndex: number) {
+  const children = thead[rowIndex]?.children || [];
+
+  for (let i = 0; i < children.length; i++) {
+    const dom = children[i] as HTMLElement;
+    dom.style.removeProperty('top');
+    dom.style.top =
+      rowIndex > 0 ? getPreviousTopHeight(thead, rowIndex) + 'px' : '0';
+  }
+}
+
 export function hasFixedColumn(columns: Array<ColumnProps | SummaryProps>) {
   return find(columns, column => column.fixed);
 }