fix(Table): 是否固定表头、是否展示 NoData 时，重置滚动状态 (#856)

WeBankFinTech · Jul 1, 2024 · 5988b6e · 5988b6e
1 parent 4d74139
commit 5988b6e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/components/table/components/bodyTable.tsx b/components/table/components/bodyTable.tsx
@@ -118,7 +118,10 @@ export default defineComponent({
         };
 
         const onScroll = (e: Event) => {
-            if (layout.isScrollX.value || layout.isScrollY.value) {
+            if (
+                (layout.isScrollX.value || layout.isScrollY.value)
+                && bodyWrapperRef.value.offsetHeight > 0 // BodyTable 没有高度时，同步滚动状态无意义
+            ) {
                 syncPosition(e);
             }
         };

diff --git a/components/table/useTableStyle.ts b/components/table/useTableStyle.ts
@@ -1,5 +1,5 @@
-import { type CSSProperties, type Ref, computed, reactive, ref } from 'vue';
-import { isFunction, isPlainObject, throttle } from 'lodash-es';
+import { type CSSProperties, type Ref, computed, reactive, ref, watch } from 'vue';
+import { isFunction, isPlainObject, isUndefined, throttle } from 'lodash-es';
 import getPrefixCls from '../_util/getPrefixCls';
 import { getCellValue } from './helper';
 import useTableLayout from './useTableLayout';
@@ -343,7 +343,53 @@ export default ({
         }
     };
 
-    // 同步两个 table 的位移
+    // 边界场景：重置滚动状态
+    watch(
+        [
+            () => props.height,
+            () => showData.value.length,
+        ],
+        (
+            [nextHeight, nextDataLength],
+            [prevHeight, prevDataLength],
+        ) => {
+            if (!props.showHeader) {
+                return;
+            }
+
+            const resetScrolling = (resetBodyTable = true): void => {
+                // BodyTable
+                if (resetBodyTable && scrollbarRef.value) {
+                    scrollbarRef.value.containerRef.scrollLeft = 0;
+                }
+                // HeaderTable
+                if (headerWrapperRef.value) {
+                    headerWrapperRef.value.scrollLeft = 0;
+                }
+                // updateScrollState
+                scrollState.x = 'left';
+            };
+
+            if (
+                // <BodyTable> -> <NoData>
+                prevDataLength !== 0 && nextDataLength === 0
+            ) {
+                resetScrolling(false);
+            } else if (
+                // <NoData> -> <BodyTable>
+                prevDataLength === 0 && nextDataLength !== 0
+            ) {
+                resetScrolling();
+            } else if (
+                // 不固定表头 -> 固定表头
+                isUndefined(prevHeight) && !isUndefined(nextHeight)
+            ) {
+                resetScrolling();
+            }
+        },
+    );
+
+    // BodyTable 滚动后，同步 HeaderTable(可能不存在) 的 scrollLeft
     const syncPosition = throttle((e: Event) => {
         const $bodyWrapper = e.target as HTMLElement;
         if (!$bodyWrapper) {