feat(table): add class to identify expanded and folded row (#3331)

* feat(table): add class to identify expanded and folded row when expandRowKeys is defined

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/table/hooks/useClassName.ts

@@ -114,6 +114,8 @@ export default function useClassName() {
     tableExpandClasses: {
       iconBox: `${classPrefix.value}-table__expand-box`,
       iconCell: `${classPrefix.value}-table__expandable-icon-cell`,
+      rowExpanded: `${classPrefix.value}-table__row--expanded`,
+      rowFolded: `${classPrefix.value}-table__row--folded`,
       row: `${classPrefix.value}-table__expanded-row`,
       rowInner: `${classPrefix.value}-table__expanded-row-inner`,
       expanded: `${classPrefix.value}-table__row--expanded`,

src/table/hooks/useRowExpand.tsx

@@ -9,6 +9,7 @@ import {
   PrimaryTableCellParams,
   TableExpandedRowParams,
   RowEventContext,
+  RowClassNameParams,
 } from '../type';
 import useClassName from './useClassName';
 import { useTNodeJSX } from '../../hooks/tnode';
@@ -37,6 +38,14 @@ export default function useRowExpand(props: TdPrimaryTableProps, context: SetupC
 
   const isFirstColumnFixed = computed(() => props.columns?.[0]?.fixed === 'left');
 
+  const getExpandedRowClass = (params: RowClassNameParams<TableRowData>) => {
+    // 如果没有配置展开行，则不需要增加展开收起相关的类名
+    if (!showExpandedRow.value) return null;
+    const { row, rowKey } = params;
+    const currentRowKey = get(row, rowKey || 'id');
+    return tableExpandClasses[tExpandedRowKeys.value?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'];
+  };
+
   const onToggleExpand = (e: MouseEvent | KeyboardEvent, row: TableRowData) => {
     props.expandOnRowClick && e.stopPropagation();
     const currentId = get(row, props.rowKey || 'id');
@@ -116,5 +125,6 @@ export default function useRowExpand(props: TdPrimaryTableProps, context: SetupC
     getExpandColumn,
     renderExpandedRow,
     onInnerExpandRowClick,
+    getExpandedRowClass,
   };
 }

src/table/primary-table.tsx

@@ -87,7 +87,12 @@ export default defineComponent({
     const { tDisplayColumns, renderColumnController } = useColumnController(props, context);
     // 展开/收起行功能
     const {
-      showExpandedRow, showExpandIconColumn, getExpandColumn, renderExpandedRow, onInnerExpandRowClick,
+      showExpandedRow,
+      showExpandIconColumn,
+      getExpandColumn,
+      renderExpandedRow,
+      onInnerExpandRowClick,
+      getExpandedRowClass,
     } = useRowExpand(props, context);
     // 排序功能
     const { renderSortIcon } = useSorter(props, context);
@@ -148,7 +153,7 @@ export default defineComponent({
 
     // 如果想给 TR 添加类名，请在这里补充，不要透传更多额外 Props 到 BaseTable
     const tRowClassNames = computed(() => {
-      const tClassNames = [props.rowClassName, selectedRowClassNames.value];
+      const tClassNames = [props.rowClassName, selectedRowClassNames.value, getExpandedRowClass];
       return tClassNames.filter((v) => v);
     });
 

src/table/tr.tsx

@@ -189,7 +189,12 @@ export default defineComponent({
     const classes = computed(() => {
       const customClasses = formatRowClassNames(
         props.rowClassName,
-        { row: props.row, rowIndex: props.rowIndex, type: 'body' },
+        {
+          row: props.row,
+          rowKey: props.rowKey,
+          rowIndex: props.rowIndex,
+          type: 'body',
+        },
         props.rowKey || 'id',
       );
       return [trStyles.value?.classes, customClasses];

src/table/type.ts

@@ -1035,6 +1035,7 @@ export type TableRowAttributes<T> =
 export interface RowClassNameParams<T> {
   row: T;
   rowIndex: number;
+  rowKey?: string;
   type?: 'body' | 'foot';
 }
 

test/snap/__snapshots__/csr.test.js.snap

@@ -38821,7 +38821,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/table.vue 1
           class="t-table__body"
         >
           <tr
-            class=""
+            class="t-table__row--folded"
           >
             <td
               class="t-table__expandable-icon-cell"
@@ -38860,7 +38860,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/table.vue 1
             </td>
           </tr>
           <tr
-            class=""
+            class="t-table__row--folded"
           >
             <td
               class="t-table__expandable-icon-cell"
@@ -38899,7 +38899,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/table.vue 1
             </td>
           </tr>
           <tr
-            class=""
+            class="t-table__row--folded"
           >
             <td
               class="t-table__expandable-icon-cell"