diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx index bfe40d17089..bbfdaaa1395 100644 --- a/src/data-table/src/TableParts/Body.tsx +++ b/src/data-table/src/TableParts/Body.tsx @@ -147,6 +147,7 @@ export default defineComponent({ setup (props) { const { slots: dataTableSlots, + bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, @@ -412,6 +413,7 @@ export default defineComponent({ }) }) return { + bodyWidthRef, dataTableSlots, componentId, scrollbarInstRef, @@ -496,6 +498,7 @@ export default defineComponent({ mergedTableLayout, flexHeight, loadingKeySet, + bodyWidthRef, onResize, setHeaderScrollLeft } = this @@ -654,7 +657,14 @@ export default defineComponent({ ]} colspan={colCount} > - {renderExpand!(rawNode, actualRowIndex)} +
+ {renderExpand!(rawNode, actualRowIndex)} +
) diff --git a/src/data-table/src/styles/index.cssr.ts b/src/data-table/src/styles/index.cssr.ts index 2058d06668a..9ff019a6102 100644 --- a/src/data-table/src/styles/index.cssr.ts +++ b/src/data-table/src/styles/index.cssr.ts @@ -152,6 +152,13 @@ export default c([ background-clip: padding-box; transition: background-color .3s var(--n-bezier); `, [ + cB('data-table-expand', ` + position: sticky; + left: 0; + overflow: hidden; + margin: calc(var(--n-th-padding) * -1); + padding: var(--n-th-padding); + `), cM('striped', 'background-color: var(--n-merged-td-color-striped);', [ cB('data-table-td', 'background-color: var(--n-merged-td-color-striped);') ]),