fix(component): resovle fullscreen content issues with "fixedHeight" and "contentFullHeight" combined (#3721)

src/components/Page/src/PageWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="getClass" ref="wrapperRef">
+  <div :class="getClass" :style="getStyle" ref="wrapperRef">
     <PageHeader
       :ghost="ghost"
       :title="title"
@@ -39,7 +39,8 @@
   import { useDesign } from '@/hooks/web/useDesign';
   import { propTypes } from '@/utils/propTypes';
   import { PageHeader } from 'ant-design-vue';
-  import { omit } from 'lodash-es';
+  import { omit, debounce } from 'lodash-es';
+  import { useElementSize } from '@vueuse/core';
   import {
     CSSProperties,
     PropType,
@@ -82,6 +83,9 @@
   const headerRef = ref(null);
   const contentRef = ref(null);
   const footerRef = ref(null);
+
+  const { height } = useElementSize(wrapperRef);
+
   const { prefixCls } = useDesign('page-wrapper');
 
   provide(
@@ -101,6 +105,7 @@
     [contentRef],
     getUpwardSpace,
   );
+  const debounceRedoHeight = debounce(redoHeight, 50);
   setCompensation({ useLayoutFooter: true, elements: [footerRef] });
 
   const getClass = computed(() => {
@@ -113,6 +118,13 @@
     ];
   });
 
+  const getStyle = computed(() => {
+    const { contentFullHeight, fixedHeight } = props;
+    return {
+      ...(contentFullHeight && fixedHeight ? { height: '100%' } : {}),
+    };
+  });
+
   const getHeaderStyle = computed((): CSSProperties => {
     const { headerSticky } = props;
     if (!headerSticky) {
@@ -172,6 +184,11 @@
       immediate: true,
     },
   );
+
+  watch(height, () => {
+    const { contentFullHeight, fixedHeight } = props;
+    contentFullHeight && fixedHeight && debounceRedoHeight();
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-page-wrapper';

src/components/Table/src/BasicTable.vue

@@ -49,7 +49,7 @@
     SizeType,
     ColumnChangeParam,
   } from './types/table';
-  import { ref, computed, unref, toRaw, inject, watchEffect, useAttrs, useSlots } from 'vue';
+  import { ref, computed, unref, toRaw, inject, watch, useAttrs, useSlots } from 'vue';
   import { Table } from 'ant-design-vue';
   import { BasicForm, useForm } from '@/components/Form';
   import { PageWrapperFixedHeightKey } from '@/enums/pageEnum';
@@ -70,10 +70,10 @@
   import { useTableFooter } from './hooks/useTableFooter';
   import { useTableForm } from './hooks/useTableForm';
   import { useDesign } from '@/hooks/web/useDesign';
-  import { omit } from 'lodash-es';
+  import { omit, debounce } from 'lodash-es';
+  import { useElementSize } from '@vueuse/core';
   import { basicProps } from './props';
   import { isFunction } from '@/utils/is';
-  import { warn } from '@/utils/log';
 
   defineOptions({ name: 'BasicTable' });
 
@@ -108,6 +108,8 @@
   const formRef = ref(null);
   const innerPropsRef = ref<Partial<BasicTableProps>>();
 
+  const { height } = useElementSize(wrapRef);
+
   const { prefixCls } = useDesign('basic-table');
   const [registerForm, formActions] = useForm();
 
@@ -116,13 +118,6 @@
   });
 
   const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false);
-  watchEffect(() => {
-    unref(isFixedHeightPage) &&
-      props.canResize &&
-      warn(
-        "'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)",
-      );
-  });
 
   const { getLoading, setLoading } = useLoading(getProps);
   const { getPaginationInfo, getPagination, setPagination, setShowPagination, getShowPagination } =
@@ -196,6 +191,7 @@
     wrapRef,
     formRef,
   );
+  const debounceRedoHeight = debounce(redoHeight, 50);
 
   const { scrollTo } = useTableScrollTo(tableElRef, getDataSourceRef);
 
@@ -278,6 +274,10 @@
     return !!unref(getDataSourceRef).length;
   });
 
+  watch(height, () => {
+    unref(isFixedHeightPage) && props.canResize && debounceRedoHeight();
+  });
+
   function setProps(props: Partial<BasicTableProps>) {
     innerPropsRef.value = { ...unref(innerPropsRef), ...props };
   }