improve(design): Table border-bottom display logic

oceanbase · Nov 11, 2024 · a3fc280 · a3fc280
1 parent 2d5b986
commit a3fc280
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/packages/design/src/table/index.tsx b/packages/design/src/table/index.tsx
@@ -45,6 +45,7 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
   const {
     locale: customLocale,
     columns,
+    footer,
     pagination: customPagination,
     rowSelection,
     toolAlertRender,
@@ -80,6 +81,7 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
   const tableCls = classNames(
     {
       [`${prefixCls}-expandable`]: !isEmpty(expandable),
+      [`${prefixCls}-has-footer`]: !!footer,
     },
     className
   );
@@ -238,6 +240,7 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
             }
           : undefined
       }
+      footer={footer}
       pagination={
         pagination === false
           ? false

diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts
@@ -29,6 +29,9 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
       color: colorText,
       backgroundColor: colorBgBase,
       borderRadius: borderRadiusLG,
+      [`${componentCls}-footer`]: {
+        borderBottom: `1px solid ${colorBorderSecondary}`,
+      },
       // head 样式
       [`${componentCls}-thead > tr`]: {
         ['td, th']: {
@@ -115,6 +118,12 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
       },
     },
 
+    // 非可展开表格、带 footer 表格、空表格、带边框表格: 底部添加分隔线
+    [`${componentCls}-wrapper:not(${componentCls}-expandable):not(${componentCls}-has-footer) ${componentCls}:not(${componentCls}-bordered):not(${componentCls}-empty)`]:
+      {
+        borderBottom: `1px solid ${colorBorderSecondary}`,
+      },
+
     // 滚动表格样式
     // 由于滚动表格会在 tbody 下最前面多一个 tr 元素，因此需要设置相反的斑马条样式
     // .ant-table-scroll-horizontal: 水平滚动
@@ -163,12 +172,6 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
             },
         },
       },
-      // Remove pagination borderTop for expandable Table
-      [`${componentCls}-pagination`]: {
-        [`&${antCls}-pagination`]: {
-          borderTop: 'none',
-        },
-      },
     },
 
     // loading style
@@ -187,7 +190,6 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
         [`&${antCls}-pagination`]: {
           padding: `${padding}px 0`,
           margin: '0 !important',
-          borderTop: `1px solid ${colorBorderSecondary}`,
         },
         // 批量操作栏样式
         [`${componentCls}-batch-operation-bar`]: {
@@ -205,14 +207,6 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
           },
         },
       },
-      // Remove pagination borderTop for bordered Table
-      [`${componentCls}${componentCls}-bordered`]: {
-        [`&+${componentCls}-pagination`]: {
-          [`&${antCls}-pagination`]: {
-            borderTop: 'none',
-          },
-        },
-      },
     },
 
     // 批量操作栏中的弹出层样式