Commit d8c38207c08510d805a8dc66ffbba210e0cf4215
1 parent
f4778431
fix(table): scrollbar style
Showing
2 changed files
with
63 additions
and
2 deletions
src/components/Table/src/hooks/useTableScroll.ts
| @@ -68,6 +68,23 @@ export function useTableScroll( | @@ -68,6 +68,23 @@ export function useTableScroll( | ||
| 68 | bodyEl = tableEl.querySelector('.ant-table-body'); | 68 | bodyEl = tableEl.querySelector('.ant-table-body'); |
| 69 | } | 69 | } |
| 70 | 70 | ||
| 71 | + const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight; | ||
| 72 | + const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth; | ||
| 73 | + | ||
| 74 | + if (hasScrollBarY) { | ||
| 75 | + tableEl.classList.contains('hide-scrollbar-y') && | ||
| 76 | + tableEl.classList.remove('hide-scrollbar-y'); | ||
| 77 | + } else { | ||
| 78 | + !tableEl.classList.contains('hide-scrollbar-y') && tableEl.classList.add('hide-scrollbar-y'); | ||
| 79 | + } | ||
| 80 | + | ||
| 81 | + if (hasScrollBarX) { | ||
| 82 | + tableEl.classList.contains('hide-scrollbar-x') && | ||
| 83 | + tableEl.classList.remove('hide-scrollbar-x'); | ||
| 84 | + } else { | ||
| 85 | + !tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x'); | ||
| 86 | + } | ||
| 87 | + | ||
| 71 | bodyEl!.style.height = 'unset'; | 88 | bodyEl!.style.height = 'unset'; |
| 72 | 89 | ||
| 73 | if (!unref(getCanResize) || tableData.length === 0) return; | 90 | if (!unref(getCanResize) || tableData.length === 0) return; |
src/design/ant/table.less
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | 2 | ||
| 3 | // fix table unnecessary scrollbar | 3 | // fix table unnecessary scrollbar |
| 4 | .@{prefix-cls} { | 4 | .@{prefix-cls} { |
| 5 | - .ant-table-wrapper { | 5 | + .hide-scrollbar-y { |
| 6 | .ant-spin-nested-loading { | 6 | .ant-spin-nested-loading { |
| 7 | .ant-spin-container { | 7 | .ant-spin-container { |
| 8 | .ant-table { | 8 | .ant-table { |
| @@ -13,7 +13,7 @@ | @@ -13,7 +13,7 @@ | ||
| 13 | } | 13 | } |
| 14 | 14 | ||
| 15 | .ant-table-body { | 15 | .ant-table-body { |
| 16 | - overflow: auto !important; | 16 | + overflow-y: auto !important; |
| 17 | } | 17 | } |
| 18 | } | 18 | } |
| 19 | 19 | ||
| @@ -24,6 +24,50 @@ | @@ -24,6 +24,50 @@ | ||
| 24 | } | 24 | } |
| 25 | } | 25 | } |
| 26 | } | 26 | } |
| 27 | + | ||
| 28 | + .ant-table-fixed-left { | ||
| 29 | + .ant-table-body-outer { | ||
| 30 | + .ant-table-body-inner { | ||
| 31 | + overflow-y: auto !important; | ||
| 32 | + } | ||
| 33 | + } | ||
| 34 | + } | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | + } | ||
| 38 | + } | ||
| 39 | + } | ||
| 40 | + | ||
| 41 | + .hide-scrollbar-x { | ||
| 42 | + .ant-spin-nested-loading { | ||
| 43 | + .ant-spin-container { | ||
| 44 | + .ant-table { | ||
| 45 | + .ant-table-content { | ||
| 46 | + .ant-table-scroll { | ||
| 47 | + .ant-table-hide-scrollbar { | ||
| 48 | + //overflow-x: auto !important; | ||
| 49 | + } | ||
| 50 | + | ||
| 51 | + .ant-table-body { | ||
| 52 | + overflow: auto !important; | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | + | ||
| 56 | + .ant-table-fixed-right { | ||
| 57 | + .ant-table-body-outer { | ||
| 58 | + .ant-table-body-inner { | ||
| 59 | + overflow-x: auto !important; | ||
| 60 | + } | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | + | ||
| 64 | + .ant-table-fixed-left { | ||
| 65 | + .ant-table-body-outer { | ||
| 66 | + .ant-table-body-inner { | ||
| 67 | + overflow-x: auto !important; | ||
| 68 | + } | ||
| 69 | + } | ||
| 70 | + } | ||
| 27 | } | 71 | } |
| 28 | } | 72 | } |
| 29 | } | 73 | } |