diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts index 7032fb581..e454a4a32 100644 --- 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 index 9ed482ed8..f49afe32d 100644 --- 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) => { + // 如果没有配置展开行，则不需要增加展开收起相关的类名 + 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 index 190199cb3..e533fc252 100644 --- 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 index 0b5b2c907..d3c967a3f 100644 --- 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 index 8eeca653a..a1f7b35de 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -1035,6 +1035,7 @@ export type TableRowAttributes = export interface RowClassNameParams { 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 index cf347da7b..f43776bcb 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/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" > csr test ./src/config-provider/_example/table.vue 1 csr test ./src/config-provider/_example/table.vue 1 renders ./src/config-provider/_example/pagination.v exports[`ssr snapshot test > renders ./src/config-provider/_example/popconfirm.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/config-provider/_example/table.vue correctly 1`] = `"
Type
Platform
Property


Type
Platform
Property
ArrayVue(PC)A
StringReact(PC)B
ObjectMiniprogramC


"`; +exports[`ssr snapshot test > renders ./src/config-provider/_example/table.vue correctly 1`] = `"
Type
Platform
Property


Type
Platform
Property
ArrayVue(PC)A
StringReact(PC)B
ObjectMiniprogramC


"`; exports[`ssr snapshot test > renders ./src/date-picker/_example/base.vue correctly 1`] = `"
"`;