fix(table): scrollbar style

无木
1 parent f4778431
Showing 2 changed files with 63 additions and 2 deletions
src/components/Table/src/hooks/useTableScroll.ts
src/design/ant/table.less
@@ -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;
@@ -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;
+                }
+              }
+            }
           }
         }
       }