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

XiaoMi · Sep 26, 2024 · 492e423 · 492e423
1 parent e9aadf1
commit 492e423
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 33 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
@@ -197,6 +197,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
@@ -290,6 +292,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;
+              }
             }
           }
         }