perf: table hover & stickyScroll

vueComponent · Mar 30, 2022 · 9004644 · 9004644
1 parent 797a1c6
commit 9004644
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 14 deletions.
diff --git a/components/vc-table/Body/index.tsx b/components/vc-table/Body/index.tsx
@@ -46,12 +46,16 @@ export default defineComponent<BodyProps<any>>({
     );
     const startRow = ref(-1);
     const endRow = ref(-1);
+    let timeoutId: any;
     useProvideHover({
       startRow,
       endRow,
       onHover: (start, end) => {
-        startRow.value = start;
-        endRow.value = end;
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+          startRow.value = start;
+          endRow.value = end;
+        }, 100);
       },
     });
     return () => {

diff --git a/components/vc-table/Cell/index.tsx b/components/vc-table/Cell/index.tsx
@@ -22,6 +22,7 @@ import { useInjectHover } from '../context/HoverContext';
 import { useInjectSticky } from '../context/StickyContext';
 import { warning } from '../../vc-util/warning';
 import type { MouseEventHandler } from '../../_util/EventInterface';
+import eagerComputed from '../../_util/eagerComputed';
 
 /** Check if cell is in hover range */
 function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: number, endRow: number) {
@@ -120,7 +121,7 @@ export default defineComponent<CellProps>({
         (props.additionalProps?.rowspan as number)
       );
     });
-    const hovering = computed(() => {
+    const hovering = eagerComputed(() => {
       const { index } = props;
       return inHoverRange(index, rowSpan.value || 1, startRow.value, endRow.value);
     });

diff --git a/components/vc-table/stickyScrollBar.tsx b/components/vc-table/stickyScrollBar.tsx
@@ -1,13 +1,5 @@
 import type { Ref } from 'vue';
-import {
-  watchEffect,
-  getCurrentInstance,
-  defineComponent,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue';
+import { watchEffect, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import addEventListenerWrap from '../vc-util/Dom/addEventListener';
 import { getOffset } from '../vc-util/Dom/css';
 import classNames from '../_util/classNames';
@@ -34,7 +26,6 @@ export default defineComponent<StickyScrollBarProps>({
     const bodyScrollWidth = ref(0);
     const bodyWidth = ref(0);
     const scrollBarWidth = ref(0);
-    const instance = getCurrentInstance();
     watchEffect(
       () => {
         bodyScrollWidth.value = props.scrollBodySizeInfo.scrollWidth || 0;
@@ -120,7 +111,6 @@ export default defineComponent<StickyScrollBarProps>({
           isHiddenScrollBar: false,
         }));
       }
-      instance.update?.();
     };
 
     const setScrollLeft = (left: number) => {