fix(table): 修复合并单元格边框样式问题 (#3005)

XiaoMi · Sep 25, 2024 · 9a1e050 · 9a1e050
1 parent 0b98947
commit 9a1e050
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 35 deletions.
diff --git a/.changeset/blue-impalas-brake.md b/.changeset/blue-impalas-brake.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(table): 修复合并单元格边框样式问题
diff --git a/.changeset/tame-eels-pump.md b/.changeset/tame-eels-pump.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": patch
+---
+
+fix: 修复合并单元格边框样式问题
diff --git a/packages/ui/table/src/BaseTable.tsx b/packages/ui/table/src/BaseTable.tsx
@@ -17,7 +17,7 @@ import { useEmbedExpand, UseEmbedExpandProps } from './hooks/use-embed-expand'
 import { TheadContent } from './TheadContent'
 import { ColGroupContent } from './ColGroupContent'
 import { TbodyContent } from './TbodyContent'
-import { SELECTION_DATA_KEY } from './Table';
+import { SELECTION_DATA_KEY } from './Table'
 
 const _role = 'table'
 const _prefix = getPrefixCls('table')
@@ -151,7 +151,7 @@ export const BaseTable = forwardRef<HTMLDivElement | null, BaseTableProps>(
       let hasSumColumn = false
 
       columns.forEach((column, index) => {
-        if (index === 0  || (index === 1 && columns[0].dataKey === SELECTION_DATA_KEY)) {
+        if (index === 0 || (index === 1 && columns[0].dataKey === SELECTION_DATA_KEY)) {
           // @ts-ignore
           sumRow.raw[column.dataKey] = i18n.get('table.total')
         }
@@ -195,6 +195,8 @@ export const BaseTable = forwardRef<HTMLDivElement | null, BaseTableProps>(
     } = providedValue
 
     const hasBorder = borderedProp ?? bordered
+    const hasScrollToLeft = scrollSize.scrollLeft === 0
+    const hasLeftFixedColumns = leftFrozenColKeys.length > 0
 
     const extraHeader = extra && extra.header
     const extraFooter = extra && extra.footer
@@ -288,6 +290,7 @@ export const BaseTable = forwardRef<HTMLDivElement | null, BaseTableProps>(
       prefixCls,
       className,
       hasBorder && `${prefixCls}--bordered`,
+      (hasScrollToLeft || hasLeftFixedColumns) && `${prefixCls}--bordered-left-none`,
       striped && `${prefixCls}--striped`,
       size && `${prefixCls}--size-${size}`,
       virtual && `${prefixCls}--virtual`

diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss
@@ -106,54 +106,42 @@ $emptyContent: '#{$component-prefix}-table-body-empty-content' !default;
   }
 
   &--bordered {
-    table {
-      thead {
-        & > tr > th:not(:last-child) {
-          border-right: use-border-size('normal') use-color('gray', 200);
-        }
-
-        & > tr:has(+ tr) {
-          th:not(.#{$prefix}-header-cell--group-last-column) {
-            border-right: use-border-size('normal') use-color('gray', 200);
-          }
-        }
+    > .#{$prefix}__wrapper {
+      border: use-border-size('normal') use-color('gray', 200);
 
-        & > tr + tr:last-child {
-          th {
-            border-right: use-border-size('normal') use-color('gray', 200);
-          }
-        }
+      .#{$prefix}-header-cell, .#{$prefix}-cell {
+        border-left: use-border-size('normal') use-color('gray', 200);
       }
 
-      tr {
+      .#{$prefix}-row {
         &:last-child {
-          td {
+          .#{$prefix}-cell {
             border-bottom: none;
           }
         }
-
-        td:not(:last-child) {
-          border-right: use-border-size('normal') use-color('gray', 200);
-        }
       }
     }
 
-    .#{$prefix}__wrapper {
-      border: use-border-size('normal') use-color('gray', 200);
+    &.#{$prefix}--bordered-left-none {
+      > .#{$prefix}__wrapper {
+        border-left: none;
+      }
     }
 
     &.#{$prefix}--virtual {
-      .#{$prefix}-row {
-        .#{$prefix}-cell:not(:last-child) {
-          border-right: use-border-size('normal') use-color('gray', 200);
+      > .#{$prefix}__wrapper {
+        .#{$prefix}-row {
+          .#{$prefix}-cell {
+            border-bottom: use-border-size('normal') use-color('gray', 200);
+          }
         }
-      }
 
-      .#{$prefix}-virtual-row {
-        &:last-child {
-          .#{$prefix}-row {
-            .#{$prefix}-cell {
-              border-bottom: none;
+        .#{$prefix}-virtual-row {
+          &:last-child {
+            .#{$prefix}-row {
+              .#{$prefix}-cell {
+                border-bottom: none;
+              }
             }
           }
         }