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

@@ -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()

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: `
+        <el-pagination
+          :total="total"
+          :page-size="pageSize"
+          @current-change="onCurrentChange"
+          v-model:currentPage="currentPage"
+        />
+      },
+      `,
+      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)
+  })
+
 })
 

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<Nullable<number>>(() => {
       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<IPagination>('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)
   },
-
 })