From 9b0f0e71e79d79abaad1f2d2749bc0c20b62d371 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 22 Apr 2024 10:37:28 +0800
Subject: [PATCH] perf: table hover cell, close #7451

---
 components/vc-table/Cell/index.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/vc-table/Cell/index.tsx b/components/vc-table/Cell/index.tsx
index 5c54e8f44..9bd49d898 100644
--- a/components/vc-table/Cell/index.tsx
+++ b/components/vc-table/Cell/index.tsx
@@ -1,7 +1,7 @@
 import classNames from '../../_util/classNames';
-import { filterEmpty, flattenChildren, isValidElement } from '../../_util/props-util';
+import { filterEmpty, findDOMNode, flattenChildren, isValidElement } from '../../_util/props-util';
 import type { CSSProperties, VNodeArrayChildren } from 'vue';
-import { Text, computed, defineComponent, isVNode } from 'vue';
+import { watch, shallowRef, Text, computed, defineComponent, isVNode } from 'vue';
 
 import type {
   DataIndex,
@@ -24,6 +24,7 @@ import { warning } from '../../vc-util/warning';
 import type { MouseEventHandler } from '../../_util/EventInterface';
 import eagerComputed from '../../_util/eagerComputed';
 import { customRenderSlot } from '../../_util/vnode';
+import { addClass, removeClass } from '../../vc-util/Dom/class';
 
 /** Check if cell is in hover range */
 function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: number, endRow: number) {
@@ -157,6 +158,17 @@ export default defineComponent<CellProps>({
         return vnode;
       }
     };
+
+    const hoverRef = shallowRef(null);
+    watch([hovering, () => props.prefixCls, hoverRef], () => {
+      const cellDom = findDOMNode(hoverRef.value);
+      if (!cellDom) return;
+      if (hovering.value) {
+        addClass(cellDom, `${props.prefixCls}-cell-row-hover`);
+      } else {
+        removeClass(cellDom, `${props.prefixCls}-cell-row-hover`);
+      }
+    });
     return () => {
       const {
         prefixCls,
@@ -334,7 +346,6 @@ export default defineComponent<CellProps>({
             [`${cellPrefixCls}-with-append`]: appendNode,
             [`${cellPrefixCls}-fix-sticky`]:
               (isFixLeft || isFixRight) && isSticky && supportSticky.value,
-            [`${cellPrefixCls}-row-hover`]: !cellProps && hovering.value,
           },
           additionalProps.class,
           cellClassName,
@@ -347,7 +358,7 @@ export default defineComponent<CellProps>({
       };
 
       return (
-        <Component {...componentProps}>
+        <Component {...componentProps} ref={hoverRef}>
           {appendNode}
           {childNode}
           {slots.dragHandle?.()}