Commit 6095cb54afe3f4fcabbfff26ac6704ecfbbddae5
1 parent
2c6aa852
fix(table): ensure that the height calculation is normal close #349
Showing
1 changed file
with
16 additions
and
14 deletions
src/components/Table/src/hooks/useTableScroll.ts
@@ -23,7 +23,7 @@ export function useTableScroll( | @@ -23,7 +23,7 @@ export function useTableScroll( | ||
23 | const modalFn = useModalContext(); | 23 | const modalFn = useModalContext(); |
24 | 24 | ||
25 | // Greater than animation time 280 | 25 | // Greater than animation time 280 |
26 | - const [debounceRedoHeight] = useDebounce(redoHeight, 200); | 26 | + const [debounceRedoHeight] = useDebounce(redoHeight, 100); |
27 | 27 | ||
28 | const getCanResize = computed(() => { | 28 | const getCanResize = computed(() => { |
29 | const { canResize, scroll } = unref(propsRef); | 29 | const { canResize, scroll } = unref(propsRef); |
@@ -41,11 +41,9 @@ export function useTableScroll( | @@ -41,11 +41,9 @@ export function useTableScroll( | ||
41 | ); | 41 | ); |
42 | 42 | ||
43 | function redoHeight() { | 43 | function redoHeight() { |
44 | - if (unref(getCanResize)) { | ||
45 | - nextTick(() => { | ||
46 | - calcTableHeight(); | ||
47 | - }); | ||
48 | - } | 44 | + nextTick(() => { |
45 | + calcTableHeight(); | ||
46 | + }); | ||
49 | } | 47 | } |
50 | 48 | ||
51 | function setHeight(heigh: number) { | 49 | function setHeight(heigh: number) { |
@@ -63,15 +61,23 @@ export function useTableScroll( | @@ -63,15 +61,23 @@ export function useTableScroll( | ||
63 | const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef); | 61 | const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef); |
64 | const tableData = unref(getDataSourceRef); | 62 | const tableData = unref(getDataSourceRef); |
65 | 63 | ||
66 | - if (!unref(getCanResize) || tableData.length === 0) return; | ||
67 | - | ||
68 | - await nextTick(); | ||
69 | - //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight | ||
70 | const table = unref(tableElRef); | 64 | const table = unref(tableElRef); |
71 | if (!table) return; | 65 | if (!table) return; |
72 | 66 | ||
73 | const tableEl: Element = table.$el; | 67 | const tableEl: Element = table.$el; |
74 | if (!tableEl) return; | 68 | if (!tableEl) return; |
69 | + | ||
70 | + if (!bodyEl) { | ||
71 | + bodyEl = tableEl.querySelector('.ant-table-body'); | ||
72 | + } | ||
73 | + | ||
74 | + bodyEl!.style.height = 'unset'; | ||
75 | + | ||
76 | + if (!unref(getCanResize) || tableData.length === 0) return; | ||
77 | + | ||
78 | + await nextTick(); | ||
79 | + //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight | ||
80 | + | ||
75 | const headEl = tableEl.querySelector('.ant-table-thead '); | 81 | const headEl = tableEl.querySelector('.ant-table-thead '); |
76 | 82 | ||
77 | if (!headEl) return; | 83 | if (!headEl) return; |
@@ -124,10 +130,6 @@ export function useTableScroll( | @@ -124,10 +130,6 @@ export function useTableScroll( | ||
124 | height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; | 130 | height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; |
125 | setHeight(height); | 131 | setHeight(height); |
126 | 132 | ||
127 | - if (!bodyEl) { | ||
128 | - bodyEl = tableEl.querySelector('.ant-table-body'); | ||
129 | - } | ||
130 | - | ||
131 | bodyEl!.style.height = `${height}px`; | 133 | bodyEl!.style.height = `${height}px`; |
132 | } | 134 | } |
133 | useWindowSizeFn(calcTableHeight, 280); | 135 | useWindowSizeFn(calcTableHeight, 280); |