fix(table): scrollbar style

vbenjs · Jul 4, 2021 · d8c3820 · d8c3820
1 parent f477843
commit d8c3820
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 2 deletions.
diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts
@@ -68,6 +68,23 @@ export function useTableScroll(
       bodyEl = tableEl.querySelector('.ant-table-body');
     }
 
+    const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight;
+    const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth;
+
+    if (hasScrollBarY) {
+      tableEl.classList.contains('hide-scrollbar-y') &&
+        tableEl.classList.remove('hide-scrollbar-y');
+    } else {
+      !tableEl.classList.contains('hide-scrollbar-y') && tableEl.classList.add('hide-scrollbar-y');
+    }
+
+    if (hasScrollBarX) {
+      tableEl.classList.contains('hide-scrollbar-x') &&
+        tableEl.classList.remove('hide-scrollbar-x');
+    } else {
+      !tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x');
+    }
+
     bodyEl!.style.height = 'unset';
 
     if (!unref(getCanResize) || tableData.length === 0) return;

diff --git a/src/design/ant/table.less b/src/design/ant/table.less
@@ -2,7 +2,7 @@
 
 // fix table unnecessary scrollbar
 .@{prefix-cls} {
-  .ant-table-wrapper {
+  .hide-scrollbar-y {
     .ant-spin-nested-loading {
       .ant-spin-container {
         .ant-table {
@@ -13,7 +13,7 @@
               }
 
               .ant-table-body {
-                overflow: auto !important;
+                overflow-y: auto !important;
               }
             }
 
@@ -24,6 +24,50 @@
                 }
               }
             }
+
+            .ant-table-fixed-left {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-y: auto !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .hide-scrollbar-x {
+    .ant-spin-nested-loading {
+      .ant-spin-container {
+        .ant-table {
+          .ant-table-content {
+            .ant-table-scroll {
+              .ant-table-hide-scrollbar {
+                //overflow-x: auto !important;
+              }
+
+              .ant-table-body {
+                overflow: auto !important;
+              }
+            }
+
+            .ant-table-fixed-right {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-x: auto !important;
+                }
+              }
+            }
+
+            .ant-table-fixed-left {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-x: auto !important;
+                }
+              }
+            }
           }
         }
       }