fix(table): 修复数据变化时,吸底滚动条位置没有变化的问题

Tencent · Sep 20, 2022 · 76a123a · 76a123a
1 parent 12ed756
commit 76a123a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx
@@ -57,6 +57,7 @@ export default defineComponent({
     const tableBodyRef = ref<HTMLTableElement>();
     const tableFootHeight = ref(0);
     const paginationAffixRef = ref();
+    const horizontalScrollAffixRef = ref();
 
     const {
       virtualScrollClasses, tableLayoutClasses, tableBaseClass, tableColFixedClasses,
@@ -88,7 +89,7 @@ export default defineComponent({
       updateThWidthList,
       setRecalculateColWidthFuncRef,
       addTableResizeObserver,
-    } = useFixed(props, context, finalColumns, paginationAffixRef);
+    } = useFixed(props, context, finalColumns, paginationAffixRef, horizontalScrollAffixRef);
 
     // 1. 表头吸顶；2. 表尾吸底；3. 底部滚动条吸底；4. 分页器吸底
     const {
@@ -309,6 +310,7 @@ export default defineComponent({
       refreshTable,
       onInnerVirtualScroll,
       paginationAffixRef,
+      horizontalScrollAffixRef,
     };
   },
 
@@ -567,6 +569,7 @@ export default defineComponent({
             offsetBottom={0}
             props={getAffixProps(this.horizontalScrollAffixedBottom)}
             style={{ marginTop: `-${this.scrollbarWidth * 2}px` }}
+            ref="horizontalScrollAffixRef"
           >
             <div
               ref="horizontalScrollbarRef"

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