perf: table hover cell, close #7451

Author: tangjinzhou

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?.()}