From afd74c95d8ccd6ced5ce5f5c1a9abe3a398a0217 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 27 Mar 2022 10:34:00 +0800
Subject: [PATCH] fix: table sticky scroll bar not reactive

---
 components/vc-table/Table.tsx           | 18 +++++++++++++++++
 components/vc-table/stickyScrollBar.tsx | 27 +++++++++++--------------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/components/vc-table/Table.tsx b/components/vc-table/Table.tsx
index ccbf0b42e0..4a1964f13a 100644
--- a/components/vc-table/Table.tsx
+++ b/components/vc-table/Table.tsx
@@ -33,6 +33,7 @@ import useSticky from './hooks/useSticky';
 import FixedHolder from './FixedHolder';
 import type { CSSProperties } from 'vue';
 import {
+  onUpdated,
   computed,
   defineComponent,
   nextTick,
@@ -327,6 +328,10 @@ export default defineComponent<TableProps<DefaultRecordType>>({
     const fullTableRef = ref<HTMLDivElement>();
     const scrollHeaderRef = ref<HTMLDivElement>();
     const scrollBodyRef = ref<HTMLDivElement>();
+    const scrollBodySizeInfo = ref<{ scrollWidth: number; clientWidth: number }>({
+      scrollWidth: 0,
+      clientWidth: 0,
+    });
     const scrollSummaryRef = ref<HTMLDivElement>();
     const [pingedLeft, setPingedLeft] = useState(false);
     const [pingedRight, setPingedRight] = useState(false);
@@ -495,6 +500,18 @@ export default defineComponent<TableProps<DefaultRecordType>>({
       nextTick(() => {
         triggerOnScroll();
         setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.value).width);
+        scrollBodySizeInfo.value = {
+          scrollWidth: scrollBodyRef.value?.scrollWidth || 0,
+          clientWidth: scrollBodyRef.value?.clientWidth || 0,
+        };
+      });
+    });
+    onUpdated(() => {
+      nextTick(() => {
+        scrollBodySizeInfo.value = {
+          scrollWidth: scrollBodyRef.value?.scrollWidth || 0,
+          clientWidth: scrollBodyRef.value?.clientWidth || 0,
+        };
       });
     });
 
@@ -762,6 +779,7 @@ export default defineComponent<TableProps<DefaultRecordType>>({
                 scrollBodyRef={scrollBodyRef}
                 onScroll={onScroll}
                 container={container}
+                scrollBodySizeInfo={scrollBodySizeInfo.value}
               />
             )}
           </>
diff --git a/components/vc-table/stickyScrollBar.tsx b/components/vc-table/stickyScrollBar.tsx
index a7e0922b73..e1c6d92ba9 100644
--- a/components/vc-table/stickyScrollBar.tsx
+++ b/components/vc-table/stickyScrollBar.tsx
@@ -1,8 +1,7 @@
 import type { Ref } from 'vue';
 import {
+  watchEffect,
   getCurrentInstance,
-  onBeforeUpdate,
-  onBeforeMount,
   defineComponent,
   onBeforeUnmount,
   onMounted,
@@ -22,12 +21,13 @@ interface StickyScrollBarProps {
   onScroll: (params: { scrollLeft?: number }) => void;
   offsetScroll: number;
   container: HTMLElement | Window;
+  scrollBodySizeInfo: { scrollWidth: number; clientWidth: number };
 }
 
 export default defineComponent<StickyScrollBarProps>({
   name: 'StickyScrollBar',
   inheritAttrs: false,
-  props: ['offsetScroll', 'container', 'scrollBodyRef'] as any,
+  props: ['offsetScroll', 'container', 'scrollBodyRef', 'scrollBodySizeInfo'] as any,
   emits: ['scroll'],
   setup(props, { emit, expose }) {
     const tableContext = useInjectTable();
@@ -35,18 +35,15 @@ export default defineComponent<StickyScrollBarProps>({
     const bodyWidth = ref(0);
     const scrollBarWidth = ref(0);
     const instance = getCurrentInstance();
-    const updateSomeValue = () => {
-      bodyScrollWidth.value = props.scrollBodyRef.value.scrollWidth || 0;
-      bodyWidth.value = props.scrollBodyRef.value.clientWidth || 0;
-      scrollBarWidth.value =
-        bodyScrollWidth.value && bodyWidth.value * (bodyWidth.value / bodyScrollWidth.value);
-    };
-    onBeforeMount(() => {
-      updateSomeValue();
-    });
-    onBeforeUpdate(() => {
-      updateSomeValue();
-    });
+    watchEffect(
+      () => {
+        bodyScrollWidth.value = props.scrollBodySizeInfo.scrollWidth || 0;
+        bodyWidth.value = props.scrollBodySizeInfo.clientWidth || 0;
+        scrollBarWidth.value =
+          bodyScrollWidth.value && bodyWidth.value * (bodyWidth.value / bodyScrollWidth.value);
+      },
+      { flush: 'post' },
+    );
 
     const scrollBarRef = ref();