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 4 Packages Projects Releases Wiki Activity

fix(table): fix table height calculation problem

Browse Source 
Because the table data obtained by the interface may be later than the calctableheight method, the table cannot adapt to the height, and a scroll bar appears on the page (#348)
This commit is contained in:
ztw2010 2021-03-10 22:24:37 +08:00 committed by GitHub
parent 9aa1be821b
commit 0fe42a06c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/Page/src/PageWrapper.vue
View File

@ -45,6 +45,7 @@
import { propTypes } from '/@/utils/propTypes';
import { omit } from 'lodash-es';
import { PageHeader } from 'ant-design-vue';
import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
export default defineComponent({
name: 'PageWrapper',
components: { PageFooter, PageHeader },
@ -105,41 +106,7 @@
watch(
() => [contentHeight?.value, getShowFooter.value],
() => {
if (!props.contentFullHeight) {
return;
}
nextTick(() => {
//fix:in contentHeight mode: delay getting footer and header dom element to get the correct height
const footer = unref(footerRef);
const header = unref(headerRef);
footerHeight.value = 0;
const footerEl = footer?.$el;
if (footerEl) {
footerHeight.value += footerEl?.offsetHeight ?? 0;
}
let headerHeight = 0;
const headerEl = header?.$el;
if (headerEl) {
headerHeight += headerEl?.offsetHeight ?? 0;
}
// fix:subtract content's marginTop and marginBottom value
let subtractHeight = 0;
const { marginBottom, marginTop } = getComputedStyle(
document.querySelectorAll(`.${prefixVar}-page-wrapper-content`)?.[0]
);
if (marginBottom) {
const contentMarginBottom = Number(marginBottom.replace(/[^\d]/g, ''));
subtractHeight += contentMarginBottom;
}
if (marginTop) {
const contentMarginTop = Number(marginTop.replace(/[^\d]/g, ''));
subtractHeight += contentMarginTop;
}
setPageHeight?.(
unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight
);
});
calcContentHeight();
},
{
flush: 'post',
@ -147,6 +114,52 @@
}
);
onMountedOrActivated(() => {
nextTick(() => {
calcContentHeight();
});
});
function calcContentHeight() {
if (!props.contentFullHeight) {
return;
}
//fix:in contentHeight mode: delay getting footer and header dom element to get the correct height
const footer = unref(footerRef);
const header = unref(headerRef);
footerHeight.value = 0;
const footerEl = footer?.$el;
if (footerEl) {
footerHeight.value += footerEl?.offsetHeight ?? 0;
}
let headerHeight = 0;
const headerEl = header?.$el;
if (headerEl) {
headerHeight += headerEl?.offsetHeight ?? 0;
}
// fix:subtract content's marginTop and marginBottom value
let subtractHeight = 0;
let marginBottom = '0px';
let marginTop = '0px';
const classElments = document.querySelectorAll(`.${prefixVar}-page-wrapper-content`);
if (classElments && classElments.length > 0) {
const contentEl = classElments[0];
const cssStyle = getComputedStyle(contentEl);
marginBottom = cssStyle?.marginBottom;
marginTop = cssStyle?.marginTop;
}
if (marginBottom) {
const contentMarginBottom = Number(marginBottom.replace(/[^\d]/g, ''));
subtractHeight += contentMarginBottom;
}
if (marginTop) {
const contentMarginTop = Number(marginTop.replace(/[^\d]/g, ''));
subtractHeight += contentMarginTop;
}
setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight);
}
return {
getContentStyle,
footerRef,

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

@ -9,6 +9,7 @@ import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
import { useModalContext } from '/@/components/Modal';
import { useDebounce } from '/@/hooks/core/useDebounce';
import type { BasicColumn } from '/@/components/Table';
import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
export function useTableScroll(
propsRef: ComputedRef<BasicTableProps>,
@ -21,8 +22,8 @@ export function useTableScroll(
const modalFn = useModalContext();
//320 Greater than animation time 280
const [debounceRedoHeight] = useDebounce(redoHeight, 300);
// Greater than animation time 280
const [debounceRedoHeight] = useDebounce(redoHeight, 100);
const getCanResize = computed(() => {
const { canResize, scroll } = unref(propsRef);
@ -30,13 +31,12 @@ export function useTableScroll(
});
watch(
() => unref(getCanResize),
() => [unref(getCanResize), , unref(getDataSourceRef)?.length],
() => {
debounceRedoHeight();
},
{
flush: 'post',
immediate: true,
}
);
@ -132,6 +132,12 @@ export function useTableScroll(
}
useWindowSizeFn(calcTableHeight, 280);
onMountedOrActivated(() => {
calcTableHeight();
nextTick(() => {
debounceRedoHeight();
});
});
const getScrollX = computed(() => {
let width = 0;