feat(table): add class to identify expanded and folded row when expan…

…dRowKeys is defined (#4586)

src/table/hooks/useClassName.ts

@@ -106,6 +106,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';
@@ -38,6 +39,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, row: TableRowData) => {
     props.expandOnRowClick && e.stopPropagation();
     const currentId = get(row, props.rowKey || 'id');
@@ -113,5 +122,6 @@ export default function useRowExpand(props: TdPrimaryTableProps, context: SetupC
     getExpandColumn,
     renderExpandedRow,
     onInnerExpandRowClick,
+    getExpandedRowClass,
   };
 }

src/table/primary-table.tsx

@@ -97,8 +97,14 @@ export default defineComponent({
     const { tDisplayColumns, renderColumnController } = useColumnController(props, context);
 
     // 展开/收起行功能
-    const { showExpandedRow, showExpandIconColumn, getExpandColumn, renderExpandedRow, onInnerExpandRowClick } =
-      useRowExpand(props, context);
+    const {
+      showExpandedRow,
+      showExpandIconColumn,
+      getExpandColumn,
+      renderExpandedRow,
+      onInnerExpandRowClick,
+      getExpandedRowClass,
+    } = useRowExpand(props, context);
 
     // 排序功能
     const { renderSortIcon } = useSorter(props, context);
@@ -172,7 +178,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

@@ -187,7 +187,7 @@ 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 [

src/table/type.ts

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

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

@@ -46730,7 +46730,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/table.vue 1
 
           <!---->
           <tr
-            class=""
+            class="t-table__row--folded"
           >
 
             <td
@@ -46771,7 +46771,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/table.vue 1
 
           </tr>
           <tr
-            class=""
+            class="t-table__row--folded"
           >
 
             <td
@@ -46812,7 +46812,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/table.vue 1
 
           </tr>
           <tr
-            class=""
+            class="t-table__row--folded"
           >
 
             <td
@@ -134949,7 +134949,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/expandable.vue 1`] =
 
           <!---->
           <tr
-            class=""
+            class="t-table__row--folded"
           >
 
             <td
@@ -135044,7 +135044,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/expandable.vue 1`] =
 
           </tr>
           <tr
-            class=""
+            class="t-table__row--folded"
           >
 
             <td
@@ -135139,7 +135139,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/expandable.vue 1`] =
 
           </tr>
           <tr
-            class=""
+            class="t-table__row--folded"
           >
 
             <td
@@ -135234,7 +135234,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/expandable.vue 1`] =
 
           </tr>
           <tr
-            class=""
+            class="t-table__row--folded"
           >
 
             <td
@@ -135329,7 +135329,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/expandable.vue 1`] =
 
           </tr>
           <tr
-            class=""
+            class="t-table__row--folded"
           >
 
             <td