fix(comp:table): fixed column shadow are displayed after resize (#1909)

IDuxFE · May 7, 2024 · 0ea197a · 0ea197a
1 parent ff062cd
commit 0ea197a
Showing 1 changed file with 33 additions and 11 deletions.
diff --git a/packages/components/table/src/composables/useScroll.ts b/packages/components/table/src/composables/useScroll.ts
@@ -48,17 +48,20 @@ export function useScroll(props: TableProps, { setStickyScrollLeft }: StickyCont
     },
   )
 
+  const resizeMark = useTableResized(scrollBodyRef, scrollContentRef)
+
   const { handleScroll, pingedStart, pingedEnd } = useScrollRef(
     props,
     virtualScrollRef,
     headerVirtualScrollRef,
     scrollHeadRef,
     scrollBodyRef,
     scrollFootRef,
+    resizeMark,
     setStickyScrollLeft,
   )
 
-  const { scrollHorizontalOverflowed, scrollVerticalOverflowed } = useScrollOverflowed(scrollBodyRef, scrollContentRef)
+  const { scrollHorizontalOverflowed, scrollVerticalOverflowed } = useScrollOverflowed(scrollBodyRef, resizeMark)
   const scrollWidth = computed(() => convertCssPixel(props.scroll?.width))
   const scrollHeight = computed(() => convertCssPixel(props.scroll?.height))
 
@@ -132,6 +135,7 @@ function useScrollRef(
   scrollHeadRef: Ref<HTMLDivElement | undefined>,
   scrollBodyRef: Ref<HTMLDivElement | undefined>,
   scrollFootRef: Ref<HTMLDivElement | undefined>,
+  resizeMark: Ref<boolean>,
   setStickyScrollLeft: (value: number) => void,
 ) {
   const pingedStart = ref(false)
@@ -214,13 +218,17 @@ function useScrollRef(
     }
   }
 
+  watch(resizeMark, () => {
+    const currentTarget = convertElement(scrollBodyRef)
+    if (currentTarget) {
+      handleScroll({ currentTarget } as unknown as Event)
+    }
+  })
+
   return { handleScroll, pingedStart, pingedEnd }
 }
 
-function useScrollOverflowed(
-  scrollBodyRef: Ref<HTMLDivElement | undefined>,
-  scrollContentRef: Ref<HTMLDivElement | undefined>,
-) {
+function useScrollOverflowed(scrollBodyRef: Ref<HTMLDivElement | undefined>, resizeMark: Ref<boolean>) {
   const scrollHorizontalOverflowed = ref(false)
   const scrollVerticalOverflowed = ref(false)
 
@@ -235,20 +243,34 @@ function useScrollOverflowed(
     }
   }
 
+  watch(resizeMark, calcScrollOverflowed)
+
+  return {
+    scrollHorizontalOverflowed,
+    scrollVerticalOverflowed,
+  }
+}
+
+function useTableResized(
+  scrollBodyRef: Ref<HTMLDivElement | undefined>,
+  scrollContentRef: Ref<HTMLDivElement | undefined>,
+) {
+  const resizeMark = ref(false)
+  const handleResize = () => {
+    resizeMark.value = !resizeMark.value
+  }
+
   let stopResizeObservers: Array<() => void> = []
   const stopHandler = () => stopResizeObservers.forEach(stop => stop())
 
   onMounted(() => {
     stopResizeObservers = [
-      useResizeObserver(scrollBodyRef, calcScrollOverflowed),
-      useResizeObserver(scrollContentRef, calcScrollOverflowed),
+      useResizeObserver(scrollBodyRef, handleResize),
+      useResizeObserver(scrollContentRef, handleResize),
     ]
   })
 
   onBeforeUnmount(() => stopHandler())
 
-  return {
-    scrollHorizontalOverflowed,
-    scrollVerticalOverflowed,
-  }
+  return resizeMark
 }