github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-02-03 02:54:40 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix(table): scrollbar style

Browse Source
This commit is contained in:
无木 2021-07-05 00:34:23 +08:00
parent f4778431de
commit d8c38207c0
2 changed files with 63 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Table/src/hooks/useTableScroll.ts
View File

@ -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;

48
src/design/ant/table.less
View File

@ -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;
}
}
}
}
}
}