From 092c89036d526c46a1af54e2f7e1b407be2c7a6e Mon Sep 17 00:00:00 2001
From: jeremywu <591449570@qq.com>
Date: Tue, 1 Dec 2020 21:17:24 +0800
Subject: [PATCH] fix(pagination): fix pagination current-change event not
emitting (#756)
- Fix the issue when total gets changed and the currentPage gets changed but `current-change` event
not emitting
---
packages/breadcrumb/src/item.vue | 2 +-
.../pagination/__tests__/pagination.spec.ts | 38 +++++++++
packages/pagination/src/index.ts | 79 ++++++++++++-------
3 files changed, 90 insertions(+), 29 deletions(-)
diff --git a/packages/breadcrumb/src/item.vue b/packages/breadcrumb/src/item.vue
index a727a9e63e..47011fa790 100644
--- a/packages/breadcrumb/src/item.vue
+++ b/packages/breadcrumb/src/item.vue
@@ -49,7 +49,7 @@ export default defineComponent({
default: false,
},
},
- setup(props: IBreadcrumbItemProps, ctx) {
+ setup(props: IBreadcrumbItemProps) {
const link = ref(null)
const parent: IBreadcrumbInject = inject('breadcrumb')
const instance = getCurrentInstance()
diff --git a/packages/pagination/__tests__/pagination.spec.ts b/packages/pagination/__tests__/pagination.spec.ts
index 9701de8051..c97e12dc16 100644
--- a/packages/pagination/__tests__/pagination.spec.ts
+++ b/packages/pagination/__tests__/pagination.spec.ts
@@ -216,5 +216,43 @@ describe('click pager', () => {
expect(onSizeChange).toHaveBeenCalled()
expect(wrapper.findComponent(Pagination).emitted()).toHaveProperty('size-change')
})
+
+ test('should handle total size change', async () => {
+ const onCurrentChange = jest.fn()
+ const wrapper = mount({
+ components: {
+ [Pagination.name]: Pagination,
+ },
+ template: `
+
+ },
+ `,
+ methods: {
+ onCurrentChange,
+ },
+ data() {
+ return {
+ currentPage: 3,
+ total: 1000,
+ pageSize: 100,
+ }
+ },
+ })
+
+ await nextTick()
+
+ expect(wrapper.vm.currentPage).toBe(3)
+
+ wrapper.vm.total = 100
+ await nextTick()
+ expect(wrapper.vm.currentPage).toBe(1)
+ expect(onCurrentChange).toHaveBeenCalledWith(1)
+ })
+
})
diff --git a/packages/pagination/src/index.ts b/packages/pagination/src/index.ts
index 16b202bb15..22c3cb34d7 100644
--- a/packages/pagination/src/index.ts
+++ b/packages/pagination/src/index.ts
@@ -3,7 +3,6 @@ import {
h,
ref,
computed,
- watchEffect,
watch,
nextTick,
provide,
@@ -17,6 +16,8 @@ import Jumper from './jumper.vue'
import Total from './total.vue'
import Pager from './pager.vue'
+const getValidPageSize = (val: number) => Number.isNaN(val) ? 10 : val
+
export default defineComponent({
name: 'ElPagination',
@@ -104,11 +105,10 @@ export default defineComponent({
'update:pageSize',
],
setup(props, { emit }) {
- const internalCurrentPage = ref(1)
const lastEmittedPage = ref(-1)
const userChangePageSize = ref(false)
+ const internalPageSize = ref(getValidPageSize(props.pageSize))
- const internalPageSize = ref(0)
const internalPageCount = computed>(() => {
if (typeof props.total === 'number') {
return Math.max(1, Math.ceil(props.total / internalPageSize.value))
@@ -118,30 +118,14 @@ export default defineComponent({
return null
})
- watchEffect(() => {
- internalCurrentPage.value = getValidCurrentPage(props.currentPage)
- })
- watchEffect(() => {
- internalPageSize.value = isNaN(props.pageSize) ? 10 : props.pageSize
- })
- watchEffect(() => {
- emit('update:currentPage', internalCurrentPage.value)
- lastEmittedPage.value = -1
- })
- watch(() => internalPageCount.value,val => {
- const oldPage = internalCurrentPage.value
- if (val > 0 && oldPage === 0) {
- internalCurrentPage.value = 1
- } else if (oldPage > val) {
- internalCurrentPage.value = val === 0 ? 1 : val
- userChangePageSize.value && emitChange()
- }
- userChangePageSize.value = false
- })
+ const internalCurrentPage = ref(getValidCurrentPage(props.currentPage))
function emitChange() {
nextTick(() => {
- if (internalCurrentPage.value !== lastEmittedPage.value || userChangePageSize) {
+ if (
+ internalCurrentPage.value !== lastEmittedPage.value ||
+ userChangePageSize
+ ) {
emit('current-change', internalCurrentPage.value)
lastEmittedPage.value = internalCurrentPage.value
userChangePageSize.value = false
@@ -203,6 +187,33 @@ export default defineComponent({
return resetValue === undefined ? value : resetValue
}
+ watch(() => getValidCurrentPage(props.currentPage), val => {
+ internalCurrentPage.value = val
+ })
+
+ watch(() => props.pageSize, val => {
+ internalPageSize.value = getValidPageSize(val)
+ })
+
+ watch(internalCurrentPage, val => {
+ emit('update:currentPage', val)
+ emit('current-change', val)
+ })
+
+ watch(
+ () => internalPageCount.value,
+ val => {
+ const oldPage = internalCurrentPage.value
+ if (val > 0 && oldPage === 0) {
+ internalCurrentPage.value = 1
+ } else if (oldPage > val) {
+ internalCurrentPage.value = val === 0 ? 1 : val
+ userChangePageSize.value && emitChange()
+ }
+ userChangePageSize.value = false
+ },
+ )
+
provide('pagination', {
pageCount: computed(() => props.pageCount),
disabled: computed(() => props.disabled),
@@ -230,9 +241,21 @@ export default defineComponent({
const layout = this.layout
if (!layout) return null
- if (this.hideOnSinglePage && (!this.internalPageCount || this.internalPageCount === 1)) return null
+ if (
+ this.hideOnSinglePage &&
+ (!this.internalPageCount || this.internalPageCount === 1)
+ )
+ return null
- const rootNode = h('div', { class: ['el-pagination', { 'is-background': this.background, 'el-pagination--small': this.small }] })
+ const rootNode = h('div', {
+ class: [
+ 'el-pagination',
+ {
+ 'is-background': this.background,
+ 'el-pagination--small': this.small,
+ },
+ ],
+ })
const rootChildren = []
const rightWrapperRoot = h('div', { class: 'el-pagination__rightwrapper' })
const rightWrapperChildren = []
@@ -255,7 +278,8 @@ export default defineComponent({
disabled: this.disabled,
currentPage: this.internalCurrentPage,
pageCount: this.internalPageCount,
- nextText: this.nextText, onClick: this.next,
+ nextText: this.nextText,
+ onClick: this.next,
}),
sizes: h(Sizes, {
pageSize: this.pageSize,
@@ -289,5 +313,4 @@ export default defineComponent({
return h(rootNode, {}, rootChildren)
},
-
})