fix(layout): fix layout scale error

vben
1 parent 7a07b703
Showing 11 changed files with 58 additions and 21 deletions
CHANGELOG.zh_CN.md
src/components/Basic/index.ts
src/components/Description/index.ts
src/components/Menu/index.ts
src/components/Menu/src/useOpenKeys.ts
src/components/Table/src/components/editable/EditableCell.vue
src/components/Table/src/hooks/useDataSource.ts
src/components/Table/src/hooks/useLoading.ts
src/components/Table/src/hooks/useTableScroll.ts
src/layouts/default/header/MultipleHeader.vue
src/layouts/default/tabs/useTabDropdown.ts
@@ -10,6 +10,8 @@
  
 - 修复表格列配置已知问题
 - 恢复 table 的`isTreeTable`属性
+- 修复表格内存溢出问题
+- 修复`layout` 收缩展开功能在分割模式下失效
  
 ## 2.0.0-rc.15 (2020-12-31)
  
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 import BasicArrow from './src/BasicArrow.vue';
+import BasicTitle from './src/BasicTitle.vue';
  
-export { BasicArrow };
+export { BasicArrow, BasicTitle };
  
 // export const BasicArrow = createAsyncComponent(() => import('./src/BasicArrow.vue'));
 export const BasicHelp = createAsyncComponent(() => import('./src/BasicHelp.vue'));
-export const BasicTitle = createAsyncComponent(() => import('./src/BasicTitle.vue'));
+// export const BasicTitle = createAsyncComponent(() => import('./src/BasicTitle.vue'));
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-export const Description = createAsyncComponent(() => import('./src/index'));
+// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+// export const Description = createAsyncComponent(() => import('./src/index'));
  
+import Description from './src/index';
+
+export { Description };
 export * from './src/types';
 export { useDescription } from './src/useDescription';
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  
-export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'));
+import BasicMenu from './src/BasicMenu.vue';
+
+// export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'));
  
 export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue'));
+
+export { BasicMenu };
@@ -23,7 +23,6 @@ export function useOpenKeys(
       return;
     }
     const native = unref(getIsMixSidebar) && unref(getMixSideFixed);
-
     useTimeoutFn(
       () => {
         const menuList = toRaw(menus.value);
@@ -37,7 +36,7 @@ export function useOpenKeys(
         }
       },
       16,
-      native
+      !native
     );
   }
  
@@ -148,10 +148,16 @@
       });
  
       watchEffect(() => {
+        console.log('======================');
+        console.log(1);
+        console.log('======================');
         defaultValueRef.value = props.value;
       });
  
       watchEffect(() => {
+        console.log('======================');
+        console.log(2);
+        console.log('======================');
         const { editable } = props.column;
         if (isBoolean(editable) || isBoolean(unref(getRowEditable))) {
           isEdit.value = !!editable || unref(getRowEditable);
 import type { BasicTableProps, FetchParams, SorterResult } from '../types/table';
 import type { PaginationProps } from '../types/pagination';
  
-import { ref, unref, ComputedRef, computed, onMounted, watchEffect, reactive } from 'vue';
+import { ref, unref, ComputedRef, computed, onMounted, watch, reactive } from 'vue';
  
 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  
@@ -40,10 +40,21 @@ export function useDataSource(
   });
   const dataSourceRef = ref<Recordable[]>([]);
  
-  watchEffect(() => {
-    const { dataSource, api } = unref(propsRef);
-    !api && dataSource && (dataSourceRef.value = dataSource);
-  });
+  // watchEffect(() => {
+  //   const { dataSource, api } = unref(propsRef);
+  //   !api && dataSource && (dataSourceRef.value = dataSource);
+  // });
+
+  watch(
+    () => unref(propsRef).dataSource,
+    () => {
+      const { dataSource, api } = unref(propsRef);
+      !api && dataSource && (dataSourceRef.value = dataSource);
+    },
+    {
+      immediate: true,
+    }
+  );
  
   function handleTableChange(
     pagination: PaginationProps,
-import { ref, ComputedRef, unref, computed, watchEffect } from 'vue';
+import { ref, ComputedRef, unref, computed, watch } from 'vue';
 import type { BasicTableProps } from '../types/table';
  
 export function useLoading(props: ComputedRef<BasicTableProps>) {
   const loadingRef = ref(unref(props).loading);
  
-  watchEffect(() => {
-    loadingRef.value = unref(props).loading;
-  });
+  watch(
+    () => unref(props).loading,
+    (loading) => {
+      loadingRef.value = loading;
+    }
+  );
  
   const getLoading = computed(() => {
     return unref(loadingRef);
 import type { BasicTableProps, TableRowSelection } from '../types/table';
 import type { Ref, ComputedRef } from 'vue';
-import { computed, unref, ref, nextTick, watchEffect } from 'vue';
+import { computed, unref, ref, nextTick, watch } from 'vue';
  
 import { getViewportOffset } from '/@/utils/domUtils';
 import { isBoolean } from '/@/utils/is';
@@ -28,9 +28,15 @@ export function useTableScroll(
     return canResize && !(scroll || {}).y;
   });
  
-  watchEffect(() => {
-    unref(getCanResize) && debounceRedoHeight();
-  });
+  watch(
+    () => unref(getCanResize),
+    () => {
+      debounceRedoHeight();
+    },
+    {
+      immediate: true,
+    }
+  );
  
   function redoHeight() {
     if (unref(getCanResize)) {
@@ -34,6 +34,7 @@
         getShowInsetHeaderRef,
         getShowFullHeaderRef,
         getHeaderTheme,
+        getShowHeader,
       } = useHeaderSetting();
  
       const { getFullContent } = useFullContent();
@@ -68,7 +69,7 @@
       const getPlaceholderDomStyle = computed(
         (): CSSProperties => {
           let height = 0;
-          if (unref(getShowFullHeaderRef) || !unref(getSplit)) {
+          if ((unref(getShowFullHeaderRef) || !unref(getSplit)) && unref(getShowHeader)) {
             height += HEADER_HEIGHT;
           }
           if (unref(getShowMultipleTab)) {
@@ -129,6 +129,7 @@ export function useTabDropdown(tabContentProps: TabContentProps) {
     const isScale = !unref(getShowMenu) && !unref(getShowHeader);
     setMenuSetting({
       show: isScale,
+      hidden: !isScale,
     });
     setHeaderSetting({
       show: isScale,