diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts index 392d2d0244..38e627fedb 100644 --- a/src/table/hooks/useClassName.ts +++ b/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`, diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx index 7be9fa2dd9..499acc319a 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'; @@ -38,6 +39,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, 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, }; } diff --git a/src/table/primary-table.tsx b/src/table/primary-table.tsx index a267e98fb4..dc48772786 100644 --- a/src/table/primary-table.tsx +++ b/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); }); diff --git a/src/table/tr.tsx b/src/table/tr.tsx index 949ed9d7bc..538f7fe5ee 100644 --- a/src/table/tr.tsx +++ b/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 [ diff --git a/src/table/type.ts b/src/table/type.ts index c3617a203f..c966a63094 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -1030,6 +1030,7 @@ export type TableRowAttributes = export interface RowClassNameParams { row: T; rowIndex: number; + rowKey?: string; type?: 'body' | 'foot'; } diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap index c5080f37e1..4f7c76f1c2 100644 --- a/test/unit/snap/__snapshots__/csr.test.js.snap +++ b/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 csr test ./src/config-provider/_example/table.vue 1 csr test ./src/config-provider/_example/table.vue 1 csr test ./src/table/_example/expandable.vue 1`] = csr test ./src/table/_example/expandable.vue 1`] = csr test ./src/table/_example/expandable.vue 1`] = csr test ./src/table/_example/expandable.vue 1`] = csr test ./src/table/_example/expandable.vue 1`] = ssr test ./src/config-provider/_example/pagination. exports[`ssr snapshot test > ssr test ./src/config-provider/_example/popconfirm.vue 1`] = `"
"`; -exports[`ssr snapshot test > ssr test ./src/config-provider/_example/table.vue 1`] = `"
Type
Platform
Property
Empty Data


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


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


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


"`; exports[`ssr snapshot test > ssr test ./src/date-picker/_example/base.vue 1`] = `"
"`; @@ -1094,7 +1094,7 @@ exports[`ssr snapshot test > ssr test ./src/table/_example/ellipsis.vue 1`] = ` exports[`ssr snapshot test > ssr test ./src/table/_example/empty.vue 1`] = `"
类型
平台
属性
默认值
是否必传
说明
暂无数据


类型
平台
属性
默认值
是否必传
说明
😊 我是自定义的空内容 😊: slot


类型
平台
属性
默认值
是否必传
说明
😊 我是自定义的空内容 😊: empty function
"`; exports[`ssr snapshot test > ssr test ./src/table/_example/expandable.vue 1`] = ` -"
申请人
申请状态
签署方式
邮箱地址
申请时间
操作
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-01-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-02-01再次申请
王芳
审批过期
纸质签署
p.cumx@rampblpa.ru
2022-03-01再次申请
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-04-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-01-01再次申请
申请人
申请状态
签署方式
邮箱地址
申请时间
操作
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-01-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-02-01再次申请
王芳
审批过期
纸质签署
p.cumx@rampblpa.ru
2022-03-01再次申请
贾明
审批通过
电子签署
w.cezkdudy@lhll.au
2022-04-01查看详情
张三
审批失败
纸质签署
r.nmgw@peurezgn.sl
2022-01-01再次申请