Commit d6f65d476e07a62e63b2635f8f1f082eee4d7a83
Committed by
GitHub
1 parent
052eff91
fix(Table): 解决设置了分页的情况下,调整表格分页条数后,如果翻页,分页条数会重置的问题。 (#1270)
Showing
4 changed files
with
15 additions
and
11 deletions
CHANGELOG.zh_CN.md
@@ -11,6 +11,7 @@ | @@ -11,6 +11,7 @@ | ||
11 | - 修复`inset`属性不起作用的问题 | 11 | - 修复`inset`属性不起作用的问题 |
12 | - 修复`useTable`与`BasicTable`实例的`reload`方法`await`表现不一致的问题 | 12 | - 修复`useTable`与`BasicTable`实例的`reload`方法`await`表现不一致的问题 |
13 | - 修复`clickToRowSelect`会无视行选择框 disabled 状态的问题 | 13 | - 修复`clickToRowSelect`会无视行选择框 disabled 状态的问题 |
14 | + - 修复`BasicTable`在某些情况下,分页会被重置的问题 | ||
14 | - **BasicModal** | 15 | - **BasicModal** |
15 | - 修复点击遮罩、按下`Esc`键都不能关闭`Modal`的问题 | 16 | - 修复点击遮罩、按下`Esc`键都不能关闭`Modal`的问题 |
16 | - 修复点击关闭按钮、最大化按钮旁边的空白区域也会导致`Modal`关闭的问题 | 17 | - 修复点击关闭按钮、最大化按钮旁边的空白区域也会导致`Modal`关闭的问题 |
mock/demo/table-demo.ts
@@ -12,7 +12,7 @@ function getRandomPics(count = 10): string[] { | @@ -12,7 +12,7 @@ function getRandomPics(count = 10): string[] { | ||
12 | 12 | ||
13 | const demoList = (() => { | 13 | const demoList = (() => { |
14 | const result: any[] = []; | 14 | const result: any[] = []; |
15 | - for (let index = 0; index < 60; index++) { | 15 | + for (let index = 0; index < 200; index++) { |
16 | result.push({ | 16 | result.push({ |
17 | id: `${index}`, | 17 | id: `${index}`, |
18 | beginTime: '@datetime', | 18 | beginTime: '@datetime', |
src/components/Table/src/hooks/usePagination.tsx
1 | import type { PaginationProps } from '../types/pagination'; | 1 | import type { PaginationProps } from '../types/pagination'; |
2 | import type { BasicTableProps } from '../types/table'; | 2 | import type { BasicTableProps } from '../types/table'; |
3 | -import { computed, unref, ref, ComputedRef, watchEffect } from 'vue'; | 3 | +import { computed, unref, ref, ComputedRef, watch } from 'vue'; |
4 | import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'; | 4 | import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'; |
5 | import { isBoolean } from '/@/utils/is'; | 5 | import { isBoolean } from '/@/utils/is'; |
6 | import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const'; | 6 | import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const'; |
@@ -27,15 +27,17 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) { | @@ -27,15 +27,17 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) { | ||
27 | const configRef = ref<PaginationProps>({}); | 27 | const configRef = ref<PaginationProps>({}); |
28 | const show = ref(true); | 28 | const show = ref(true); |
29 | 29 | ||
30 | - watchEffect(() => { | ||
31 | - const { pagination } = unref(refProps); | ||
32 | - if (!isBoolean(pagination) && pagination) { | ||
33 | - configRef.value = { | ||
34 | - ...unref(configRef), | ||
35 | - ...(pagination ?? {}), | ||
36 | - }; | ||
37 | - } | ||
38 | - }); | 30 | + watch( |
31 | + () => unref(refProps).pagination, | ||
32 | + (pagination) => { | ||
33 | + if (!isBoolean(pagination) && pagination) { | ||
34 | + configRef.value = { | ||
35 | + ...unref(configRef), | ||
36 | + ...(pagination ?? {}), | ||
37 | + }; | ||
38 | + } | ||
39 | + }, | ||
40 | + ); | ||
39 | 41 | ||
40 | const getPaginationInfo = computed((): PaginationProps | boolean => { | 42 | const getPaginationInfo = computed((): PaginationProps | boolean => { |
41 | const { pagination } = unref(refProps); | 43 | const { pagination } = unref(refProps); |
src/views/demo/table/FetchTable.vue
@@ -22,6 +22,7 @@ | @@ -22,6 +22,7 @@ | ||
22 | title: '远程加载示例', | 22 | title: '远程加载示例', |
23 | api: demoListApi, | 23 | api: demoListApi, |
24 | columns: getBasicColumns(), | 24 | columns: getBasicColumns(), |
25 | + pagination: { pageSize: 10 }, | ||
25 | }); | 26 | }); |
26 | function handleReloadCurrent() { | 27 | function handleReloadCurrent() { |
27 | reload(); | 28 | reload(); |