chore: optimize

src/table/PrimaryTable.tsx

@@ -43,6 +43,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
     getExpandColumn,
     renderExpandedRow,
     onInnerExpandRowClick,
+    getExpandedRowClass,
   } = useRowExpand(props);
   // 排序功能
   const { renderSortIcon } = useSorter(props);
@@ -81,7 +82,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
 
   // 如果想给 TR 添加类名，请在这里补充，不要透传更多额外 Props 到 BaseTable
   const tRowClassNames = (() => {
-    const tClassNames = [props.rowClassName, selectedRowClassNames];
+    const tClassNames = [props.rowClassName, selectedRowClassNames, getExpandedRowClass];
     return tClassNames.filter((v) => v);
   })();
 

src/table/TR.tsx

@@ -79,7 +79,6 @@ export default function TR(props: TrProps) {
     rowAndColFixedPosition,
     virtualConfig,
     onRowMounted,
-    expandedRowKeys,
   } = props;
 
   const trRef = useRef<HTMLTableRowElement>();
@@ -100,17 +99,10 @@ export default function TR(props: TrProps) {
     [row, rowAttributes, rowIndex],
   );
 
-  const currentRowKey = useMemo(() => get(row, rowKey || 'id'), [row, rowKey]);
-
   const classes = useMemo(() => {
     const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, type: 'body' }, rowKey || 'id');
-    if (!expandedRowKeys) return [trStyles?.classes, customClasses];
-    return [
-      trStyles?.classes,
-      classNames.tableExpandClasses[expandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'],
-      customClasses,
-    ];
-  }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes, currentRowKey, classNames, expandedRowKeys]);
+    return [trStyles?.classes, customClasses];
+  }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]);
 
   const useLazyLoadParams = useMemo(() => ({ ...scroll, rowIndex }), [scroll, rowIndex]);
   const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentRef.current, trRef, useLazyLoadParams);

src/table/hooks/useRowExpand.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode, useCallback } from 'react';
 import { ChevronRightCircleIcon as TdChevronRightCircleIcon } from 'tdesign-icons-react';
 import get from 'lodash/get';
 import isFunction from 'lodash/isFunction';
@@ -32,6 +32,17 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
   // 用于在可展开收起的场景给各行添加类名使用，如果没有配置则不加相关类名
   const innerExpandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys ? tExpandedRowKeys : undefined;
 
+  const getExpandedRowClass = useCallback(
+    (params) => {
+      if (!innerExpandedRowKeys) return null;
+      const { row } = params;
+      const { rowKey } = row;
+      const currentRowKey = get(row, rowKey || 'id');
+      return tableExpandClasses[tExpandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'];
+    },
+    [tExpandedRowKeys, innerExpandedRowKeys, tableExpandClasses],
+  );
+
   const showExpandedRow = Boolean(expandedRow);
 
   const showExpandIconColumn = props.expandIcon !== false && showExpandedRow;
@@ -121,5 +132,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     renderExpandedRow,
     onInnerExpandRowClick,
     innerExpandedRowKeys,
+    getExpandedRowClass,
   };
 }

src/table/utils.ts

@@ -61,7 +61,7 @@ export function formatRowClassNames(
   let customClasses: ClassName = [];
   for (let i = 0, len = rowClassList.length; i < len; i++) {
     const rName = rowClassList[i];
-    let tClass = isFunction(rName) ? rName(params) : rName;
+    let tClass = isFunction(rName) ? rName({ ...params, row: { ...params.row, rowKey } }) : rName;
     if (isObject(tClass) && !(tClass instanceof Array)) {
       // 根据下标设置行类名
       tClass[rowIndex] && (tClass = tClass[rowIndex]);