fix(comp:table): virtual table scroll sync should be done by virtual …

…scrollTo API
IDuxFE · Jan 25, 2024 · 18b9e6b · 18b9e6b
1 parent d062236
commit 18b9e6b
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 40 deletions.
diff --git a/packages/components/table/src/composables/useScroll.ts b/packages/components/table/src/composables/useScroll.ts
@@ -16,20 +16,42 @@ import { type TableProps } from '../types'
 
 export function useScroll(props: TableProps, { setStickyScrollLeft }: StickyContext): ScrollContext {
   const virtualScrollRef = ref<VirtualScrollInstance | undefined>()
+  const headerVirtualScrollRef = ref<VirtualScrollInstance | undefined>()
   const scrollHeadRef = ref<HTMLDivElement>()
   const scrollBodyRef = ref<HTMLDivElement>()
   const scrollContentRef = ref<HTMLDivElement>()
   const scrollFootRef = ref<HTMLDivElement>()
 
-  watch(virtualScrollRef, instance => {
-    if (instance) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      scrollBodyRef.value = (instance as any).getHolderElement()
-    }
-  })
+  watch(
+    virtualScrollRef,
+    instance => {
+      if (instance) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        scrollBodyRef.value = (instance as any).getHolderElement()
+      }
+    },
+    {
+      immediate: true,
+    },
+  )
+  watch(
+    headerVirtualScrollRef,
+    instance => {
+      if (instance) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        scrollHeadRef.value = (instance as any).getHolderElement()
+        scrollHeadRef.value!.style.overflow = 'hidden'
+      }
+    },
+    {
+      immediate: true,
+    },
+  )
 
   const { handleScroll, pingedStart, pingedEnd } = useScrollRef(
     props,
+    virtualScrollRef,
+    headerVirtualScrollRef,
     scrollHeadRef,
     scrollBodyRef,
     scrollFootRef,
@@ -61,6 +83,7 @@ export function useScroll(props: TableProps, { setStickyScrollLeft }: StickyCont
 
   return {
     virtualScrollRef,
+    headerVirtualScrollRef,
     scrollHeadRef,
     scrollBodyRef,
     scrollContentRef,
@@ -80,6 +103,7 @@ export function useScroll(props: TableProps, { setStickyScrollLeft }: StickyCont
 
 export interface ScrollContext {
   virtualScrollRef: Ref<VirtualScrollInstance | undefined>
+  headerVirtualScrollRef: Ref<VirtualScrollInstance | undefined>
   scrollHeadRef: Ref<HTMLDivElement | undefined>
   scrollBodyRef: Ref<HTMLDivElement | undefined>
   scrollContentRef: Ref<HTMLDivElement | undefined>
@@ -103,6 +127,8 @@ export interface ScrollOptions {
 
 function useScrollRef(
   props: TableProps,
+  virtualScrollRef: Ref<VirtualScrollInstance | undefined>,
+  headerVirtualScrollRef: Ref<VirtualScrollInstance | undefined>,
   scrollHeadRef: Ref<HTMLDivElement | undefined>,
   scrollBodyRef: Ref<HTMLDivElement | undefined>,
   scrollFootRef: Ref<HTMLDivElement | undefined>,
@@ -143,6 +169,13 @@ function useScrollRef(
       target.scrollLeft = scrollLeft
     }
   }
+  const forceVirtualScroll = (scrollLeft: number, target: VirtualScrollInstance | undefined) => {
+    if (!target) {
+      return
+    }
+
+    target.scrollTo({ left: scrollLeft })
+  }
 
   const changeStickyScrollLeft = (scrollLeft: number) => {
     const scrollBodyElement = convertElement(scrollBodyRef)
@@ -160,8 +193,12 @@ function useScrollRef(
     const lockedTarget = lockedScrollTargetRef.value
     if (!lockedTarget || lockedTarget === currentTarget) {
       lockScrollTarget(currentTarget)
-      forceScroll(mergedScrollLeft, scrollHeadRef.value)
-      forceScroll(mergedScrollLeft, convertElement(scrollBodyRef))
+      headerVirtualScrollRef.value
+        ? forceVirtualScroll(mergedScrollLeft, headerVirtualScrollRef.value)
+        : forceScroll(mergedScrollLeft, scrollHeadRef.value)
+      virtualScrollRef.value
+        ? forceVirtualScroll(mergedScrollLeft, virtualScrollRef.value)
+        : forceScroll(mergedScrollLeft, convertElement(scrollBodyRef))
       forceScroll(mergedScrollLeft, scrollFootRef.value)
       changeStickyScrollLeft(mergedScrollLeft)
     }

diff --git a/packages/components/table/src/main/FixedHolder.tsx b/packages/components/table/src/main/FixedHolder.tsx
@@ -7,24 +7,13 @@
 
 import type { FlattedData } from '../composables/useDataSource'
 
-import {
-  type CSSProperties,
-  type Ref,
-  computed,
-  defineComponent,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
+import { type CSSProperties, type Ref, computed, defineComponent, inject, onBeforeUnmount, onMounted, watch } from 'vue'
 
 import {
   CdkVirtualScroll,
   type VirtualColRenderFn,
   type VirtualContentRenderFn,
   type VirtualRowRenderFn,
-  type VirtualScrollInstance,
   type VirtualScrollRowData,
 } from '@idux/cdk/scroll'
 import { convertCssPixel, off, on } from '@idux/cdk/utils'
@@ -49,8 +38,9 @@ export default defineComponent({
       mergedVirtual,
       mergedVirtualColWidth,
       getVirtualColWidth,
-      scrollHeadRef,
+      headerVirtualScrollRef,
       handleScroll,
+      scrollHeadRef,
       scrollWidth,
       flattedData,
       flattedColumns,
@@ -59,23 +49,6 @@ export default defineComponent({
       isSticky,
     } = inject(TABLE_TOKEN)!
 
-    const virtualScrollRef = ref<VirtualScrollInstance>()
-
-    onMounted(() => {
-      watch(
-        virtualScrollRef,
-        virtualScroll => {
-          if (virtualScroll) {
-            scrollHeadRef.value = virtualScroll.getHolderElement()
-            scrollHeadRef.value.style.overflow = 'hidden'
-          }
-        },
-        {
-          immediate: true,
-        },
-      )
-    })
-
     useScrollEvents(scrollHeadRef, handleScroll)
 
     const isMaxContent = computed(() => scrollWidth.value === 'max-content')
@@ -160,7 +133,7 @@ export default defineComponent({
           <div class={classes.value} style={style.value}>
             {
               <CdkVirtualScroll
-                ref={virtualScrollRef}
+                ref={headerVirtualScrollRef}
                 dataSource={virtualData.value}
                 colModifier={colModifier}
                 getKey="key"

diff --git a/packages/components/table/src/main/head/HeadCell.tsx b/packages/components/table/src/main/head/HeadCell.tsx
@@ -107,7 +107,7 @@ export default defineComponent({
     })
 
     const activeSortOrderBy = computed(() => activeOrderByMap[props.column.key])
-    const activeFilterBy = computed(() => activeFilterByMap[props.column.key] || NoopArray)
+    const activeFilterBy = computed(() => activeFilterByMap[props.column.key] || (NoopArray as unknown as VKey[]))
     const onUpdateFilterBy = (filterBy: VKey[]) => {
       const { key, filterable } = props.column
       handleFilter(key, filterable!, filterBy)

diff --git a/typings/global.d.ts b/typings/global.d.ts
@@ -1,3 +1,5 @@
+/// <reference types="vue/jsx" />
+
 export {}
 
 declare global {