Commit 6095cb54afe3f4fcabbfff26ac6704ecfbbddae5

Authored by Vben
1 parent 2c6aa852

fix(table): ensure that the height calculation is normal close #349

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