diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts index 29116e3837a938b5d043dec121319196489f5988..75c7c619556fae8f95992b06e22ef1206413801c 100644 --- 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 index 48a8c4901f4b3fc8705bd3dd60a6731013e7a60e..ee62b998d21ff2be8feb65babc7efff06965769d 100644 --- 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; + } + } + } } } }