fix: table sticky scroll bar not reactive

vueComponent · Mar 27, 2022 · afd74c9 · afd74c9
1 parent 8e37ffb
commit afd74c9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git 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
@@ -1,8 +1,7 @@
 import type { Ref } from 'vue';
 import {
+  watchEffect,
   getCurrentInstance,
-  onBeforeUpdate,
-  onBeforeMount,
   defineComponent,
   onBeforeUnmount,
   onMounted,
@@ -22,31 +21,29 @@ 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();
     const bodyScrollWidth = ref(0);
     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();