fix(table): #2596

XiaoMi · Sep 19, 2023 · fb9b128 · fb9b128
1 parent 3c16b3b
commit fb9b128
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 19 deletions.
diff --git a/.changeset/red-books-shake.md b/.changeset/red-books-shake.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": patch
+---
+
+fix: 修复紧凑模式下多选项间距问题
diff --git a/.changeset/smart-onions-tan.md b/.changeset/smart-onions-tan.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Table fix: 修复紧凑模式下多选项间距问题
diff --git a/packages/ui/table/src/Table.tsx b/packages/ui/table/src/Table.tsx
@@ -180,8 +180,9 @@ export const Table = forwardRef<HTMLDivElement | null, TableProps>(
     const checkboxColWidth = React.useMemo(() => {
       return rowSelection && typeof rowSelection.checkboxColWidth === 'number'
         ? rowSelection.checkboxColWidth
-        : 38
-    }, [rowSelection])
+        : // 适配不同尺寸，默认常规尺寸
+          { sm: 36, md: 44, lg: 52 }[rest.size ?? 'md']
+    }, [rest.size, rowSelection])
 
     // 预处理 column 支持 多选渲染
     const {

diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss
@@ -43,12 +43,20 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
         tbody {
           & > tr:not(.#{$emptyContent}) > td {
             padding: use-spacing(7);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(7);
+            }
           }
         }
 
         thead {
           & > tr > th {
             padding: use-spacing(7);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(7);
+            }
           }
         }
       }
@@ -59,12 +67,20 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
         tbody {
           & > tr:not(.#{$emptyContent}) > td {
             padding: use-spacing(5);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(5);
+            }
           }
         }
 
         thead {
           & > tr > th {
             padding: use-spacing(5);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(5);
+            }
           }
         }
       }
@@ -75,12 +91,20 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
         tbody {
           & > tr:not(.#{$emptyContent}) > td {
             padding: use-spacing(9);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(9);
+            }
           }
         }
 
         thead {
           & > tr > th {
             padding: use-spacing(9);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(9);
+            }
           }
         }
       }
@@ -161,6 +185,17 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
 
     &-cell {
       background-color: use-color('gray', 50);
+      color: use-color('gray', 700);
+      font-size: use-text-size('normal');
+      font-weight: use-text-weight('medium');
+      line-height: use-text-lineheight('sm');
+      padding: use-spacing(7) use-spacing(8);
+      border-bottom: use-border-size('normal') use-color('gray', 300);
+
+      &.#{$prefix}__embed-col,
+      &.#{$prefix}__selection-col {
+        padding: use-spacing(7) use-spacing(5);
+      }
 
       $this: &;
 
@@ -241,6 +276,7 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
         }
       }
     }
+
     &--virtual {
       display: flex;
     }
@@ -270,20 +306,6 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
   overflow: auto;
 }
 
-.#{$prefix}-header-cell {
-  color: use-color('gray', 700);
-  font-size: use-text-size('normal');
-  font-weight: use-text-weight('medium');
-  line-height: use-text-lineheight('sm');
-  padding: use-spacing(7) use-spacing(8);
-  border-bottom: use-border-size('normal') use-color('gray', 300);
-
-  &.#{$prefix}__embed-col,
-  &.#{$prefix}__selection-col {
-    padding: use-spacing(7) use-spacing(5);
-  }
-}
-
 // 单元格
 .#{$prefix}-cell {
   word-break: break-word;

diff --git a/packages/ui/table/stories/size.stories.tsx b/packages/ui/table/stories/size.stories.tsx
@@ -231,13 +231,13 @@ export const Size = () => {
     <>
       <h1>Size for Table</h1>
       <div className="table-size__wrap" style={{ minWidth: 660, background: '#fff' }}>
-        <Table bordered columns={column} data={data} size="sm" />
+        <Table bordered columns={column} data={data} size="sm" rowSelection={{}} />
         <br />
         <br />
-        <Table bordered columns={column} data={data} size="md" />
+        <Table bordered columns={column} data={data} size="md" rowSelection={{}} />
         <br />
         <br />
-        <Table bordered columns={column} data={data} size="lg" />
+        <Table bordered columns={column} data={data} size="lg" rowSelection={{}} />
       </div>
     </>
   )