diff --git a/packages/components/table/src/config.ts b/packages/components/table/src/config.ts index 9e029bb0ef..6816f512fd 100644 --- a/packages/components/table/src/config.ts +++ b/packages/components/table/src/config.ts @@ -112,10 +112,18 @@ export const cellForced = { renderHeader({ column }: { column: TableColumnCtx }) { return column.label || '' }, - renderCell({ row, store }: { row: T; store: Store }) { + renderCell({ + row, + store, + expanded, + }: { + row: T + store: Store + expanded: boolean + }) { const { ns } = store const classes = [ns.e('expand-icon')] - if (store.states.expandRows.value.includes(row)) { + if (expanded) { classes.push(ns.em('expand-icon', 'expanded')) } const callback = function (e: Event) { diff --git a/packages/components/table/src/store/expand.ts b/packages/components/table/src/store/expand.ts index b380ca9cbc..f3bee20197 100644 --- a/packages/components/table/src/store/expand.ts +++ b/packages/components/table/src/store/expand.ts @@ -34,7 +34,6 @@ function useExpand(watcherData: WatcherPropsData) { const changed = toggleRowStatus(expandRows.value, row, expanded) if (changed) { instance.emit('expand-change', row, expandRows.value.slice()) - instance.store.scheduleLayout() } } diff --git a/packages/components/table/src/table-body/render-helper.ts b/packages/components/table/src/table-body/render-helper.ts index b30a8c732a..6e45110d55 100644 --- a/packages/components/table/src/table-body/render-helper.ts +++ b/packages/components/table/src/table-body/render-helper.ts @@ -39,7 +39,12 @@ function useRender(props: Partial>) { } return index } - const rowRender = (row: T, $index: number, treeRowData?: TreeNode) => { + const rowRender = ( + row: T, + $index: number, + treeRowData?: TreeNode, + expanded = false + ) => { const { tooltipEffect, store } = props const { indent, columns } = store.states const rowClasses = getRowClass(row, $index) @@ -82,6 +87,7 @@ function useRender(props: Partial>) { column: columnData, row, $index, + expanded, } if (cellIndex === firstDefaultColumnIndex.value && treeRowData) { data.treeNode = { @@ -122,44 +128,51 @@ function useRender(props: Partial>) { const cellChildren = (cellIndex, column, data) => { return column.renderCell(data) } + const wrappedRowRender = (row: T, $index: number) => { const store = props.store const { isRowExpanded, assertRowKey } = store const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states - const hasExpandColumn = store.states.columns.value.some( - ({ type }) => type === 'expand' - ) - if (hasExpandColumn && isRowExpanded(row)) { + const columns = store.states.columns.value + const hasExpandColumn = columns.some(({ type }) => type === 'expand') + if (hasExpandColumn) { + const expanded = isRowExpanded(row) + const tr = rowRender(row, $index, undefined, expanded) const renderExpanded = parent.renderExpanded - const tr = rowRender(row, $index, undefined) - if (!renderExpanded) { - console.error('[Element Error]renderExpanded is required.') - return tr + if (expanded) { + if (!renderExpanded) { + console.error('[Element Error]renderExpanded is required.') + return tr + } + // 使用二维数组,避免修改 $index + // Use a matrix to avoid modifying $index + return [ + [ + tr, + h( + 'tr', + { + key: `expanded-row__${tr.key as string}`, + }, + [ + h( + 'td', + { + colspan: columns.length, + class: 'el-table__cell el-table__expanded-cell', + }, + [renderExpanded({ row, $index, store, expanded })] + ), + ] + ), + ], + ] + } else { + // 使用二维数组,避免修改 $index + // Use a two dimensional array avoid modifying $index + return [[tr]] } - // 使用二维数组,避免修改 $index - // Use a two dimensional array avoid modifying $index - return [ - [ - tr, - h( - 'tr', - { - key: `expanded-row__${tr.key as string}`, - }, - [ - h( - 'td', - { - colspan: store.states.columns.value.length, - class: 'el-table__cell el-table__expanded-cell', - }, - [renderExpanded({ row, $index, store })] - ), - ] - ), - ], - ] } else if (Object.keys(treeData.value).length) { assertRowKey() // TreeTable 时,rowKey 必须由用户设定,不使用 getKeyOfRow 计算 diff --git a/packages/components/table/src/table-body/styles-helper.ts b/packages/components/table/src/table-body/styles-helper.ts index 6209a493b1..81a53f7464 100644 --- a/packages/components/table/src/table-body/styles-helper.ts +++ b/packages/components/table/src/table-body/styles-helper.ts @@ -47,11 +47,6 @@ function useStyles(props: Partial>) { }) ) } - - if (props.store.states.expandRows.value.includes(row)) { - classes.push('expanded') - } - return classes } diff --git a/packages/components/table/src/table/defaults.ts b/packages/components/table/src/table/defaults.ts index ad08ea96dd..b7c6c0d52b 100644 --- a/packages/components/table/src/table/defaults.ts +++ b/packages/components/table/src/table/defaults.ts @@ -37,9 +37,14 @@ type HoverState = Nullable<{ row: T }> -type RIS = { row: T; $index: number; store: Store } +type RIS = { row: T; $index: number; store: Store; expanded: boolean } -type RenderExpanded = ({ row, $index, store }: RIS) => VNode +type RenderExpanded = ({ + row, + $index, + store, + expanded: boolean, +}: RIS) => VNode type SummaryMethod = (data: { columns: TableColumnCtx @@ -161,6 +166,7 @@ interface RenderRowData { row: T $index: number treeNode?: TreeNode + expanded: boolean } export default { diff --git a/packages/components/table/src/table/style-helper.ts b/packages/components/table/src/table/style-helper.ts index a3e526283f..c0f4704d4e 100644 --- a/packages/components/table/src/table/style-helper.ts +++ b/packages/components/table/src/table/style-helper.ts @@ -148,7 +148,7 @@ function useStyle( const { tableWrapper } = table.refs setScrollClassByEl(tableWrapper, className) } - const existsScrollClass = (className: string) => { + const hasScrollClass = (className: string) => { const { tableWrapper } = table.refs if (tableWrapper && tableWrapper.classList.contains(className)) { return true @@ -159,7 +159,7 @@ function useStyle( if (!table.refs.scrollWrapper) return if (!layout.scrollX.value) { const scrollingNoneClass = 'is-scrolling-none' - if (!existsScrollClass(scrollingNoneClass)) { + if (!hasScrollClass(scrollingNoneClass)) { setScrollClass(scrollingNoneClass) } return