diff --git a/packages/components/pagination/pagination.tsx b/packages/components/pagination/pagination.tsx index d43c01f03a..6573763d58 100755 --- a/packages/components/pagination/pagination.tsx +++ b/packages/components/pagination/pagination.tsx @@ -1,4 +1,4 @@ -import { defineComponent, computed, ref, watch, toRefs, getCurrentInstance, nextTick } from 'vue'; +import { defineComponent, computed, ref, watch, toRefs, nextTick } from 'vue'; import { isNaN, isObject } from 'lodash-es'; import { PageFirstIcon as TdPageFirstIcon, @@ -35,8 +35,6 @@ export default defineComponent({ props, setup(props: TdPaginationProps) { - const { emit } = getCurrentInstance(); - const { modelValue, pageSize, current } = toRefs(props); const renderTNodeJSX = useTNodeJSX(); const [innerCurrent, setInnerCurrent] = useVModel( @@ -149,27 +147,22 @@ export default defineComponent({ if (props.disabled) { return; } - let current = pageIndex; + + let toPageCurrent = pageIndex; if (pageIndex < min) { - current = min; + toPageCurrent = min; } else if (pageIndex > pageCount.value) { - current = pageCount.value; - } - if (innerCurrent.value !== current) { - const prev = innerCurrent.value; - pageInfo = pageInfo || { - current, - previous: prev, - pageSize: innerPageSize.value, - }; - if (pageInfo) { - setInnerCurrent(current, pageInfo); - props.onChange?.(pageInfo); - } else { - // 非主动更改时应仅更新modelValue不触发onCurrentChange事件 - emit('update:modelValue', current); - } + toPageCurrent = pageCount.value; } + + pageInfo = pageInfo || { + current: toPageCurrent, + previous: innerCurrent.value, + pageSize: innerPageSize.value, + }; + + setInnerCurrent(toPageCurrent, pageInfo); + props.onChange?.(pageInfo); }; const handlePageChange = (type: PageChangeType) => { @@ -187,40 +180,33 @@ export default defineComponent({ const pageSize = Number(val); const newPageCount = pageSize > 0 ? Math.max(Math.ceil(props.total / pageSize), 1) : 1; - const indexExceeds = innerCurrent.value > newPageCount; - // 用户自主控制 - const userControlled = current.value != null && current.value < newPageCount; + const previousCurrent = innerCurrent.value; + const indexExceeds = previousCurrent > newPageCount; - // 初始 pageInfo(用于 setInnerPageSize 时传参) - const initialPageInfo = { - current: indexExceeds ? newPageCount : innerCurrent.value, - previous: innerCurrent.value, + // 触发 onPageSizeChange 回调 + setInnerPageSize(pageSize, { + current: indexExceeds ? newPageCount : previousCurrent, + previous: previousCurrent, pageSize, - }; - - setInnerPageSize(pageSize, initialPageInfo); + }); + // 场景:用户在 onPageSizeChange 中修改 current,需要重新计算 current nextTick(() => { - if (indexExceeds) { - // 当当前页索引超过新页数时,需要跳转到合适页 - const pageCurrent = userControlled ? newPageCount : innerCurrent.value; - const pageInfo = { - current: pageCurrent, - previous: initialPageInfo.current, - pageSize, - }; - toPage(pageCurrent, pageInfo); - } else { - const pageInfo = { - current: innerCurrent.value, - previous: initialPageInfo.current, - pageSize, - }; - // 如果在 setInnerPageSize 后 current 被外部受控修改,则触发 currentChange 事件 - if (innerCurrent.value !== pageInfo.previous) { - emit('currentChange', innerCurrent.value, pageInfo); - } + const userChanged = innerCurrent.value !== previousCurrent; + const targetCurrent = userChanged ? innerCurrent.value : indexExceeds ? newPageCount : innerCurrent.value; + + const pageInfo = { + current: targetCurrent, + previous: previousCurrent, + pageSize, + }; + + // 如果用户改了 current 或者不需要跳页,直接触发 onChange + // 否则需要调用 toPage 来更新内部状态 + if (userChanged || !indexExceeds) { props.onChange?.(pageInfo); + } else { + toPage(targetCurrent, pageInfo); } }); }; diff --git a/packages/components/table/hooks/usePagination.tsx b/packages/components/table/hooks/usePagination.tsx index b7338aa3a1..ad880dfc83 100644 --- a/packages/components/table/hooks/usePagination.tsx +++ b/packages/components/table/hooks/usePagination.tsx @@ -36,7 +36,9 @@ export default function usePagination( () => { if (!pagination.value || !pagination.value.current) return; const { current, pageSize } = pagination.value; - innerPagination.value = { current, pageSize }; + + const newPageInfo = { current, pageSize }; + innerPagination.value = newPageInfo; updateDataSourceAndPaginate( pagination.value.current, pagination.value.pageSize || pagination.value.defaultPageSize, diff --git a/packages/tdesign-vue-next/.changelog/pr-6163.md b/packages/tdesign-vue-next/.changelog/pr-6163.md new file mode 100644 index 0000000000..7eee33748f --- /dev/null +++ b/packages/tdesign-vue-next/.changelog/pr-6163.md @@ -0,0 +1,6 @@ +--- +pr_number: 6163 +contributor: RSS1102 +--- + +- fix(table): 修复分页受控模式下 `current` 属性手动变更不触发 `onPageChange` 的问题 @RSS1102 ([#6163](https://github.com/Tencent/tdesign-vue-next/pull/6163))