fix(table): update top and bottom affix position when resize (#1570)

Tencent · Sep 27, 2022 · c9ead08 · c9ead08
1 parent f9ca7cc
commit c9ead08
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx
@@ -57,8 +57,6 @@ export default defineComponent({
     const tableElmRef = ref<HTMLTableElement>();
     const tableBodyRef = ref<HTMLTableElement>();
     const tableFootHeight = ref(0);
-    const paginationAffixRef = ref();
-    const horizontalScrollAffixRef = ref();
 
     const {
       virtualScrollClasses, tableLayoutClasses, tableBaseClass, tableColFixedClasses,
@@ -69,6 +67,12 @@ export default defineComponent({
     const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader(props);
     const finalColumns = computed(() => spansAndLeafNodes.value?.leafColumns || props.columns);
 
+    // 吸附相关ref 用来做视图resize后重新定位
+    const paginationAffixRef = ref();
+    const horizontalScrollAffixRef = ref();
+    const headerTopAffixRef = ref();
+    const footerBottomAffixRef = ref();
+
     // 固定表头和固定列逻辑
     const {
       scrollbarWidth,
@@ -90,7 +94,12 @@ export default defineComponent({
       updateThWidthList,
       setRecalculateColWidthFuncRef,
       addTableResizeObserver,
-    } = useFixed(props, context, finalColumns, paginationAffixRef, horizontalScrollAffixRef);
+    } = useFixed(props, context, finalColumns, {
+      paginationAffixRef,
+      horizontalScrollAffixRef,
+      headerTopAffixRef,
+      footerBottomAffixRef,
+    });
 
     // 1. 表头吸顶；2. 表尾吸底；3. 底部滚动条吸底；4. 分页器吸底
     const {
@@ -315,6 +324,8 @@ export default defineComponent({
       onInnerVirtualScroll,
       paginationAffixRef,
       horizontalScrollAffixRef,
+      headerTopAffixRef,
+      footerBottomAffixRef,
     };
   },
 
@@ -415,6 +426,7 @@ export default defineComponent({
           offsetBottom={marginScrollbarWidth || 0}
           props={getAffixProps(this.footerAffixedBottom, this.footerAffixProps)}
           style={{ marginTop: `${-1 * (this.tableFootHeight + marginScrollbarWidth)}px` }}
+          ref="footerBottomAffixRef"
         >
           <div
             ref="affixFooterRef"
@@ -459,6 +471,7 @@ export default defineComponent({
             offsetTop={0}
             props={getAffixProps(this.headerAffixedTop, this.headerAffixProps)}
             onFixedChange={this.onFixedChange}
+            ref="headerTopAffixRef"
           >
             {this.renderFixedHeader(columns)}
           </Affix>

diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts
@@ -85,8 +85,7 @@ export default function useFixed(
   props: TdBaseTableProps,
   context: SetupContext,
   finalColumns: ComputedRef<BaseTableCol<TableRowData>[]>,
-  paginationAffixRef: Ref,
-  horizontalScrollAffixRef: Ref,
+  affixRef: Record<string, Ref>,
 ) {
   const {
     columns,
@@ -381,8 +380,10 @@ export default function useFixed(
 
   const updateAffixPosition = () => {
     // 在表格高度变化的时候 需要手动调整affix的位置 因为affix本身无法监听到这些变化触发重新计算
-    paginationAffixRef.value?.handleScroll?.();
-    horizontalScrollAffixRef.value?.handleScroll?.();
+    affixRef.paginationAffixRef.value?.handleScroll?.();
+    affixRef.horizontalScrollAffixRef.value?.handleScroll?.();
+    affixRef.headerTopAffixRef.value?.handleScroll?.();
+    affixRef.footerBottomAffixRef.value?.handleScroll?.();
   };
 
   const updateThWidthList = (trList: HTMLCollection | { [colKey: string]: number }) => {

diff --git a/src/upload/themes/style/css.js b/src/upload/themes/style/css.js
@@ -0,0 +1 @@
+import '../../style/index.css';
diff --git a/src/upload/themes/style/index.js b/src/upload/themes/style/index.js
@@ -0,0 +1 @@
+import '../../style/index.js';