From 5988b6e03ec5a80a6de732e8936a22d06ea1ca03 Mon Sep 17 00:00:00 2001
From: 1zumii <524123601@qq.com>
Date: Mon, 1 Jul 2024 20:41:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(Table):=20=E6=98=AF=E5=90=A6=E5=9B=BA?=
 =?UTF-8?q?=E5=AE=9A=E8=A1=A8=E5=A4=B4=E3=80=81=E6=98=AF=E5=90=A6=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=20NoData=20=E6=97=B6=EF=BC=8C=E9=87=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E7=8A=B6=E6=80=81=20(#856)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/table/components/bodyTable.tsx |  5 ++-
 components/table/useTableStyle.ts         | 52 +++++++++++++++++++++--
 2 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/components/table/components/bodyTable.tsx b/components/table/components/bodyTable.tsx
index 184bdc51..27d7f56c 100644
--- 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
index 2511cefc..59656d0c 100644
--- 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) {