diff --git a/packages/components/table/src/composables/useDataSource.ts b/packages/components/table/src/composables/useDataSource.ts index d138a94b4..cf0a159b2 100644 --- a/packages/components/table/src/composables/useDataSource.ts +++ b/packages/components/table/src/composables/useDataSource.ts @@ -88,6 +88,7 @@ export interface MergedData { rowKey: VKey hasPrevSibling: boolean hasNextSibling: boolean + showLineIndentIndexList: number[] } export interface FlattedData extends MergedData { @@ -101,15 +102,28 @@ function convertMergeData( childrenKey: string, index: number, total: number, - parentKey?: VKey, + parents?: Omit[], ) { const rowKey = getRowKey(record) - const result: MergedData = { record, rowKey, parentKey, hasPrevSibling: index > 0, hasNextSibling: index < total - 1 } + const result: MergedData = { + record, + rowKey, + parentKey: parents?.[0].rowKey, + showLineIndentIndexList: [...(parents ?? [])].reverse()?.reduce((res, parent, index) => { + if (parent.hasNextSibling) { + res.push(index) + } + + return res + }, [] as number[]), + hasPrevSibling: index > 0, + hasNextSibling: index < total - 1, + } const subData = (record as Record)[childrenKey] as unknown[] if (subData) { result.children = subData.map((subRecord, idx) => - convertMergeData(subRecord, getRowKey, childrenKey, idx, subData.length, rowKey), + convertMergeData(subRecord, getRowKey, childrenKey, idx, subData.length, [result, ...(parents ?? [])]), ) } return result @@ -178,10 +192,20 @@ function filterData(mergedData: MergedData[], activeFilters: ActiveFilter[], exp // when virtual scrolling is enabled, this do not need to traverse all nodes function flatData(mergedData: MergedData[], expandedRowKeys: VKey[], level: number) { return mergedData.reduce((result, item) => { - const { children, parentKey, record, rowKey, hasPrevSibling, hasNextSibling } = item + const { children, parentKey, record, rowKey, hasPrevSibling, hasNextSibling, showLineIndentIndexList } = item const expanded = expandedRowKeys.includes(rowKey) - result.push({ children, parentKey, record, rowKey, level, expanded, hasPrevSibling, hasNextSibling }) + result.push({ + children, + parentKey, + record, + rowKey, + level, + expanded, + hasPrevSibling, + hasNextSibling, + showLineIndentIndexList, + }) if (expanded && item.children) { const childrenFlatData = flatData(item.children, expandedRowKeys, level + 1) diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx index 8bfaa891d..560fa3232 100644 --- a/packages/components/table/src/main/body/BodyCell.tsx +++ b/packages/components/table/src/main/body/BodyCell.tsx @@ -192,7 +192,7 @@ function renderExpandableChildren( prefixCls: string, ) { const { icon, customIcon, indent, showLine } = expandable.value! - const { record, expanded, level = 0, hasPrevSibling, hasNextSibling } = props + const { record, expanded, level = 0, hasPrevSibling, hasNextSibling, showLineIndentIndexList } = props const hasParent = level > 0 const mergedShowLine = isTreeData.value && showLine && indent @@ -211,11 +211,20 @@ function renderExpandableChildren( [`${prefixCls}-expandable-trigger-show-line`]: mergedShowLine, [`${prefixCls}-expandable-trigger-disabled`]: props.disabled, } + const indents = [] - if (mergedShowLine) { + if (indent) { for (let i = 0; i < level; i++) { - indents.push(
) + indents.push( +
, + ) } } diff --git a/packages/components/table/src/main/body/BodyRow.tsx b/packages/components/table/src/main/body/BodyRow.tsx index 9d417c520..829e26ff1 100644 --- a/packages/components/table/src/main/body/BodyRow.tsx +++ b/packages/components/table/src/main/body/BodyRow.tsx @@ -169,7 +169,7 @@ function renderChildren( isHover: Ref, ) { const children: VNodeTypes[] = [] - const { rowIndex, record, level, hasNextSibling, hasPrevSibling } = props + const { rowIndex, record, level, hasNextSibling, hasPrevSibling, showLineIndentIndexList } = props flattedColumns.value.forEach((column, colIndex) => { const { type, colSpan: getColSpan, rowSpan: getRowSpan, key } = column const colSpan = getColSpan?.(record, rowIndex) @@ -188,6 +188,7 @@ function renderChildren( level, hasNextSibling, hasPrevSibling, + showLineIndentIndexList, key, } if (type === 'expandable') { diff --git a/packages/components/table/src/main/body/RenderBodyRow.tsx b/packages/components/table/src/main/body/RenderBodyRow.tsx index 428dc0ab4..e0e158f90 100644 --- a/packages/components/table/src/main/body/RenderBodyRow.tsx +++ b/packages/components/table/src/main/body/RenderBodyRow.tsx @@ -22,13 +22,14 @@ export function renderBodyRow( expandable: TableColumnMergedExpandable | undefined, prefixCls: string, ): VNodeChild { - const { children, expanded, level, hasPrevSibling, hasNextSibling, record, rowKey } = item + const { children, expanded, level, hasPrevSibling, hasNextSibling, showLineIndentIndexList, record, rowKey } = item const rowProps = { key: rowKey, expanded, level, hasPrevSibling, hasNextSibling, + showLineIndentIndexList, hasChildren: !!children?.length, record, rowData: item, diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts index a89776ca3..fe2dfff79 100644 --- a/packages/components/table/src/types.ts +++ b/packages/components/table/src/types.ts @@ -245,6 +245,7 @@ export const tableBodyRowProps = { level: { type: Number, default: undefined }, hasPrevSibling: { type: Boolean, default: undefined }, hasNextSibling: { type: Boolean, default: undefined }, + showLineIndentIndexList: { type: Array as PropType, default: () => [] }, hasChildren: { type: Boolean, default: undefined }, record: { type: Object as PropType, required: true }, rowData: { type: Object as PropType, required: true }, @@ -263,6 +264,7 @@ export const tableBodyCellProps = { expanded: { type: Boolean, default: undefined }, hasPrevSibling: { type: Boolean, default: undefined }, hasNextSibling: { type: Boolean, default: undefined }, + showLineIndentIndexList: { type: Array as PropType, default: () => [] }, handleExpend: { type: Function as PropType<() => void>, default: undefined }, isHover: { type: Boolean, default: undefined }, selected: { type: Boolean, default: undefined }, diff --git a/packages/components/table/style/expandable.less b/packages/components/table/style/expandable.less index dcce26e3c..3f9fab559 100644 --- a/packages/components/table/style/expandable.less +++ b/packages/components/table/style/expandable.less @@ -75,7 +75,7 @@ display: inline-block; vertical-align: middle; position: relative; - &::before { + &-show-line::before { content: ''; position: absolute; top: 0;