From da76f3c77bd044caaf65e2c7a5c1c9dd72b4ca44 Mon Sep 17 00:00:00 2001 From: vben Date: Mon, 4 Jan 2021 21:31:13 +0800 Subject: [PATCH] fix(layout): fix layout scale error --- CHANGELOG.zh_CN.md | 2 ++ src/components/Basic/index.ts | 5 +++-- src/components/Description/index.ts | 7 +++++-- src/components/Menu/index.ts | 6 +++++- src/components/Menu/src/useOpenKeys.ts | 3 +-- .../src/components/editable/EditableCell.vue | 6 ++++++ .../Table/src/hooks/useDataSource.ts | 21 ++++++++++++++----- src/components/Table/src/hooks/useLoading.ts | 11 ++++++---- .../Table/src/hooks/useTableScroll.ts | 14 +++++++++---- src/layouts/default/header/MultipleHeader.vue | 3 ++- src/layouts/default/tabs/useTabDropdown.ts | 1 + 11 files changed, 58 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 855e3471c5d..92fd1b6cbda 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -10,6 +10,8 @@ - 修复表格列配置已知问题 - 恢复 table 的`isTreeTable`属性 +- 修复表格内存溢出问题 +- 修复`layout` 收缩展开功能在分割模式下失效 ## 2.0.0-rc.15 (2020-12-31) diff --git a/src/components/Basic/index.ts b/src/components/Basic/index.ts index 5c86c28f52a..5a30c887f02 100644 --- a/src/components/Basic/index.ts +++ b/src/components/Basic/index.ts @@ -1,8 +1,9 @@ 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')); diff --git a/src/components/Description/index.ts b/src/components/Description/index.ts index 359dcbb27c9..d266826924d 100644 --- a/src/components/Description/index.ts +++ b/src/components/Description/index.ts @@ -1,5 +1,8 @@ -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'; diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts index c68b79739c6..088c3793e41 100644 --- a/src/components/Menu/index.ts +++ b/src/components/Menu/index.ts @@ -1,5 +1,9 @@ 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 }; diff --git a/src/components/Menu/src/useOpenKeys.ts b/src/components/Menu/src/useOpenKeys.ts index 813d8d70800..a02876464cf 100644 --- a/src/components/Menu/src/useOpenKeys.ts +++ b/src/components/Menu/src/useOpenKeys.ts @@ -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 ); } diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue index a0b6e2f9483..28ff0ecb1b3 100644 --- a/src/components/Table/src/components/editable/EditableCell.vue +++ b/src/components/Table/src/components/editable/EditableCell.vue @@ -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); diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts index 435d234eaeb..821c28dd4b3 100644 --- a/src/components/Table/src/hooks/useDataSource.ts +++ b/src/components/Table/src/hooks/useDataSource.ts @@ -1,7 +1,7 @@ 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([]); - 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, diff --git a/src/components/Table/src/hooks/useLoading.ts b/src/components/Table/src/hooks/useLoading.ts index 454f5da24cf..2fc3b4cf6fd 100644 --- a/src/components/Table/src/hooks/useLoading.ts +++ b/src/components/Table/src/hooks/useLoading.ts @@ -1,12 +1,15 @@ -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) { 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); diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts index 72c2d51235d..d553988f7c7 100644 --- a/src/components/Table/src/hooks/useTableScroll.ts +++ b/src/components/Table/src/hooks/useTableScroll.ts @@ -1,6 +1,6 @@ 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)) { diff --git a/src/layouts/default/header/MultipleHeader.vue b/src/layouts/default/header/MultipleHeader.vue index 602dbf8d4fe..b1b6c3b524f 100644 --- a/src/layouts/default/header/MultipleHeader.vue +++ b/src/layouts/default/header/MultipleHeader.vue @@ -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)) { diff --git a/src/layouts/default/tabs/useTabDropdown.ts b/src/layouts/default/tabs/useTabDropdown.ts index 063292039e1..21e295bbdbe 100644 --- a/src/layouts/default/tabs/useTabDropdown.ts +++ b/src/layouts/default/tabs/useTabDropdown.ts @@ -129,6 +129,7 @@ export function useTabDropdown(tabContentProps: TabContentProps) { const isScale = !unref(getShowMenu) && !unref(getShowHeader); setMenuSetting({ show: isScale, + hidden: !isScale, }); setHeaderSetting({ show: isScale,