Commit b639650397409757e50886126ae3d039d9c6e49d
Committed by
GitHub
1 parent
9217a12b
fix: 修复table自适应高度和title属性声明问题 (#1496)
1.修复table升级ant3.0导致无法自适应剩余高度 2.修复table升级ant3.0导致BasicColumn类型的title属性无法找到
Showing
3 changed files
with
7 additions
and
13 deletions
src/components/Table/src/hooks/useTableFooter.ts
... | ... | @@ -8,7 +8,7 @@ export function useTableFooter( |
8 | 8 | propsRef: ComputedRef<BasicTableProps>, |
9 | 9 | scrollRef: ComputedRef<{ |
10 | 10 | x: string | number | true; |
11 | - y: Nullable<number>; | |
11 | + y: string | number | null; | |
12 | 12 | scrollToFirstRowOnChange: boolean; |
13 | 13 | }>, |
14 | 14 | tableElRef: Ref<ComponentRef>, | ... | ... |
src/components/Table/src/hooks/useTableScroll.ts
1 | 1 | import type { BasicTableProps, TableRowSelection, BasicColumn } from '../types/table'; |
2 | 2 | import type { Ref, ComputedRef } from 'vue'; |
3 | -import { computed, unref, ref, nextTick, watch } from 'vue'; | |
3 | +import { computed, unref, nextTick, watch } from 'vue'; | |
4 | 4 | import { getViewportOffset } from '/@/utils/domUtils'; |
5 | 5 | import { isBoolean } from '/@/utils/is'; |
6 | 6 | import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; |
... | ... | @@ -15,8 +15,6 @@ export function useTableScroll( |
15 | 15 | rowSelectionRef: ComputedRef<TableRowSelection | null>, |
16 | 16 | getDataSourceRef: ComputedRef<Recordable[]>, |
17 | 17 | ) { |
18 | - const tableHeightRef: Ref<Nullable<number>> = ref(null); | |
19 | - | |
20 | 18 | const modalFn = useModalContext(); |
21 | 19 | |
22 | 20 | // Greater than animation time 280 |
... | ... | @@ -43,8 +41,7 @@ export function useTableScroll( |
43 | 41 | }); |
44 | 42 | } |
45 | 43 | |
46 | - function setHeight(height: number) { | |
47 | - tableHeightRef.value = height; | |
44 | + function setHeight() { | |
48 | 45 | // Solve the problem of modal adaptive height calculation when the form is placed in the modal |
49 | 46 | modalFn?.redoModalHeight?.(); |
50 | 47 | } |
... | ... | @@ -141,7 +138,7 @@ export function useTableScroll( |
141 | 138 | headerHeight; |
142 | 139 | |
143 | 140 | height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; |
144 | - setHeight(height); | |
141 | + setHeight(); | |
145 | 142 | |
146 | 143 | bodyEl!.style.height = `${height}px`; |
147 | 144 | } |
... | ... | @@ -179,11 +176,10 @@ export function useTableScroll( |
179 | 176 | }); |
180 | 177 | |
181 | 178 | const getScrollRef = computed(() => { |
182 | - const tableHeight = unref(tableHeightRef); | |
183 | 179 | const { canResize, scroll } = unref(propsRef); |
184 | 180 | return { |
185 | 181 | x: unref(getScrollX), |
186 | - y: canResize ? tableHeight : null, | |
182 | + y: canResize ? '100%' : null, | |
187 | 183 | scrollToFirstRowOnChange: false, |
188 | 184 | ...scroll, |
189 | 185 | }; | ... | ... |
src/components/Table/src/types/table.ts
1 | 1 | import type { VNodeChild } from 'vue'; |
2 | 2 | import type { PaginationProps } from './pagination'; |
3 | 3 | import type { FormProps } from '/@/components/Form'; |
4 | -import type { | |
5 | - ColumnProps, | |
6 | - TableRowSelection as ITableRowSelection, | |
7 | -} from 'ant-design-vue/lib/table/interface'; | |
4 | +import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface'; | |
5 | +import type { ColumnProps } from 'ant-design-vue/lib/table'; | |
8 | 6 | |
9 | 7 | import { ComponentType } from './componentType'; |
10 | 8 | import { VueNode } from '/@/utils/propTypes'; | ... | ... |