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

…dRowKeys is defined
Tencent · Sep 23, 2024 · c5f113f · c5f113f
1 parent 91a72c2
commit c5f113f
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 14 deletions.
diff --git a/src/table/hooks/useClassName.ts b/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`,

diff --git a/src/table/hooks/useRowExpand.tsx b/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,
   };
 }
diff --git a/src/table/primary-table.tsx b/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);
     });
 

diff --git a/src/table/tr.tsx b/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];

diff --git a/src/table/type.ts b/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';
 }
 

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -28982,7 +28982,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/panel.vue 1`]
           >
             <div
               class="t-color-picker__saturation"
-              style="background: rgb(0, 96, 255);"
+              style="background: rgb(0, 0, 0);"
             >
               <span
                 class="t-color-picker__thumb"
@@ -29784,7 +29784,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/panel.vue 1`]
             </div>
             <div
               class="t-color-picker__saturation"
-              style="background: rgb(0, 136, 255);"
+              style="background: rgb(0, 0, 0);"
             >
               <span
                 class="t-color-picker__thumb"
@@ -32287,7 +32287,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/status-readonl
   >
     <div
       class="t-color-picker__saturation"
-      style="background: rgb(0, 96, 255);"
+      style="background: rgb(0, 0, 0);"
     >
       <span
         class="t-color-picker__thumb"
@@ -33098,7 +33098,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/swatch-color.v
           >
             <div
               class="t-color-picker__saturation"
-              style="background: rgb(0, 96, 255);"
+              style="background: rgb(0, 0, 0);"
             >
               <span
                 class="t-color-picker__thumb"
@@ -33477,7 +33477,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/swatch-color.v
           >
             <div
               class="t-color-picker__saturation"
-              style="background: rgb(0, 96, 255);"
+              style="background: rgb(0, 0, 0);"
             >
               <span
                 class="t-color-picker__thumb"
@@ -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"
@@ -54323,7 +54323,6 @@ exports[`csr snapshot test > csr test ./src/form/_example/layout.vue 1`] = `
         </div>
         <div
           class="t-form__controls"
-          style="margin-left: calc(2em + 24px);"
         >
           <div
             class="t-form__controls-content"
@@ -54361,7 +54360,6 @@ exports[`csr snapshot test > csr test ./src/form/_example/layout.vue 1`] = `
         </div>
         <div
           class="t-form__controls"
-          style="margin-left: calc(2em + 24px);"
         >
           <div
             class="t-form__controls-content"

diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap