Unverified 提交 b6396503 作者: lzdjack 提交者: GitHub

fix: 修复table自适应高度和title属性声明问题 (#1496)

1.修复table升级ant3.0导致无法自适应剩余高度
2.修复table升级ant3.0导致BasicColumn类型的title属性无法找到
上级 9217a12b
...@@ -8,7 +8,7 @@ export function useTableFooter( ...@@ -8,7 +8,7 @@ export function useTableFooter(
propsRef: ComputedRef<BasicTableProps>, propsRef: ComputedRef<BasicTableProps>,
scrollRef: ComputedRef<{ scrollRef: ComputedRef<{
x: string | number | true; x: string | number | true;
y: Nullable<number>; y: string | number | null;
scrollToFirstRowOnChange: boolean; scrollToFirstRowOnChange: boolean;
}>, }>,
tableElRef: Ref<ComponentRef>, tableElRef: Ref<ComponentRef>,
......
import type { BasicTableProps, TableRowSelection, BasicColumn } from '../types/table'; import type { BasicTableProps, TableRowSelection, BasicColumn } from '../types/table';
import type { Ref, ComputedRef } from 'vue'; import type { Ref, ComputedRef } from 'vue';
import { computed, unref, ref, nextTick, watch } from 'vue'; import { computed, unref, nextTick, watch } from 'vue';
import { getViewportOffset } from '/@/utils/domUtils'; import { getViewportOffset } from '/@/utils/domUtils';
import { isBoolean } from '/@/utils/is'; import { isBoolean } from '/@/utils/is';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
...@@ -15,8 +15,6 @@ export function useTableScroll( ...@@ -15,8 +15,6 @@ export function useTableScroll(
rowSelectionRef: ComputedRef<TableRowSelection | null>, rowSelectionRef: ComputedRef<TableRowSelection | null>,
getDataSourceRef: ComputedRef<Recordable[]>, getDataSourceRef: ComputedRef<Recordable[]>,
) { ) {
const tableHeightRef: Ref<Nullable<number>> = ref(null);
const modalFn = useModalContext(); const modalFn = useModalContext();
// Greater than animation time 280 // Greater than animation time 280
...@@ -43,8 +41,7 @@ export function useTableScroll( ...@@ -43,8 +41,7 @@ export function useTableScroll(
}); });
} }
function setHeight(height: number) { function setHeight() {
tableHeightRef.value = height;
// Solve the problem of modal adaptive height calculation when the form is placed in the modal // Solve the problem of modal adaptive height calculation when the form is placed in the modal
modalFn?.redoModalHeight?.(); modalFn?.redoModalHeight?.();
} }
...@@ -141,7 +138,7 @@ export function useTableScroll( ...@@ -141,7 +138,7 @@ export function useTableScroll(
headerHeight; headerHeight;
height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
setHeight(height); setHeight();
bodyEl!.style.height = `${height}px`; bodyEl!.style.height = `${height}px`;
} }
...@@ -179,11 +176,10 @@ export function useTableScroll( ...@@ -179,11 +176,10 @@ export function useTableScroll(
}); });
const getScrollRef = computed(() => { const getScrollRef = computed(() => {
const tableHeight = unref(tableHeightRef);
const { canResize, scroll } = unref(propsRef); const { canResize, scroll } = unref(propsRef);
return { return {
x: unref(getScrollX), x: unref(getScrollX),
y: canResize ? tableHeight : null, y: canResize ? '100%' : null,
scrollToFirstRowOnChange: false, scrollToFirstRowOnChange: false,
...scroll, ...scroll,
}; };
......
import type { VNodeChild } from 'vue'; import type { VNodeChild } from 'vue';
import type { PaginationProps } from './pagination'; import type { PaginationProps } from './pagination';
import type { FormProps } from '/@/components/Form'; import type { FormProps } from '/@/components/Form';
import type { import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface';
ColumnProps, import type { ColumnProps } from 'ant-design-vue/lib/table';
TableRowSelection as ITableRowSelection,
} from 'ant-design-vue/lib/table/interface';
import { ComponentType } from './componentType'; import { ComponentType } from './componentType';
import { VueNode } from '/@/utils/propTypes'; import { VueNode } from '/@/utils/propTypes';
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论