From 900464473823277e4b06ace1c1ddc69ab3ef21d9 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 30 Mar 2022 22:38:19 +0800
Subject: [PATCH] perf: table hover & stickyScroll

---
 components/vc-table/Body/index.tsx      |  8 ++++++--
 components/vc-table/Cell/index.tsx      |  3 ++-
 components/vc-table/stickyScrollBar.tsx | 12 +-----------
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/components/vc-table/Body/index.tsx b/components/vc-table/Body/index.tsx
index 2f3be5206..849935413 100644
--- 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
index 89c23a1ae..da292245a 100644
--- 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
index e1c6d92ba..4a3dfd2f9 100644
--- 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) => {