Commit d6f65d476e07a62e63b2635f8f1f082eee4d7a83

Authored by Lowell
Committed by GitHub
1 parent 052eff91

fix(Table): 解决设置了分页的情况下,调整表格分页条数后,如果翻页,分页条数会重置的问题。 (#1270)

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&lt;BasicTableProps&gt;) { @@ -27,15 +27,17 @@ export function usePagination(refProps: ComputedRef&lt;BasicTableProps&gt;) {
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();