fix(comp:table): tree cell with no siblings should show indent line (#…

…1735)
IDuxFE · Nov 6, 2023 · bb75c13 · bb75c13
1 parent 873d214
commit bb75c13
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 11 deletions.
diff --git 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<MergedData, 'children'>[],
 ) {
   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<string, unknown>)[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
@@ -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(<div class={`${prefixCls}-expandable-indent`} style={indentStyle}></div>)
+      indents.push(
+        <div
+          class={{
+            [`${prefixCls}-expandable-indent`]: true,
+            [`${prefixCls}-expandable-indent-show-line`]: mergedShowLine && showLineIndentIndexList.includes(i),
+          }}
+          style={indentStyle}
+        ></div>,
+      )
     }
   }
 

diff --git 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<boolean>,
 ) {
   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
@@ -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
@@ -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<number[]>, default: () => [] },
   hasChildren: { type: Boolean, default: undefined },
   record: { type: Object as PropType<any>, required: true },
   rowData: { type: Object as PropType<FlattedData>, 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<number[]>, 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
@@ -75,7 +75,7 @@
     display: inline-block;
     vertical-align: middle;
     position: relative;
-    &::before {
+    &-show-line::before {
       content: '';
       position: absolute;
       top: 0;