Pagination: fix user can not set currentPage in some condition.

examples/docs/en-US/pagination.md

@@ -51,7 +51,7 @@ Add more modules based on your scenario.
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage"
       :page-size="100"
       layout="total, prev, pager, next"
       :total="1000">
@@ -62,7 +62,7 @@ Add more modules based on your scenario.
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
       layout="sizes, prev, pager, next"
@@ -74,7 +74,7 @@ Add more modules based on your scenario.
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage"
       :page-size="100"
       layout="prev, pager, next, jumper"
       :total="1000">
@@ -85,7 +85,7 @@ Add more modules based on your scenario.
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
       layout="total, sizes, prev, pager, next, jumper"
@@ -100,8 +100,14 @@ Add more modules based on your scenario.
         console.log(`${val} items per page`);
       },
       handleCurrentChange(val) {
+        this.currentPage = val;
         console.log(`current page: ${val}`);
       }
+    },
+    data() {
+      return {
+        currentPage: 5
+      };
     }
   }
 </script>
@@ -109,11 +115,17 @@ Add more modules based on your scenario.
 :::
 <script>
   export default {
+    data() {
+      return {
+        currentPage: 5
+      };
+    },
     methods: {
       handleSizeChange(val) {
         console.log(`${val} items per page`);
       },
       handleCurrentChange(val) {
+        this.currentPage = val;
         console.log(`current page: ${val}`);
       }
     },

examples/docs/zh-CN/pagination.md

@@ -51,7 +51,7 @@
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage"
       :page-size="100"
       layout="total, prev, pager, next"
       :total="1000">
@@ -62,7 +62,7 @@
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
       layout="sizes, prev, pager, next"
@@ -74,7 +74,7 @@
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage"
       :page-size="100"
       layout="prev, pager, next, jumper"
       :total="1000">
@@ -85,7 +85,7 @@
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
       layout="total, sizes, prev, pager, next, jumper"
@@ -100,8 +100,14 @@
         console.log(`每页 ${val} 条`);
       },
       handleCurrentChange(val) {
+        this.currentPage = val;
         console.log(`当前页: ${val}`);
       }
+    },
+    data() {
+      return {
+        currentPage: 5
+      };
     }
   }
 </script>
@@ -112,12 +118,18 @@
   export default {
     methods: {
       handleSizeChange(val) {
+        this.currentPage = val;
         console.log(`每页 ${val} 条`);
       },
       handleCurrentChange(val) {
         console.log(`当前页: ${val}`);
       }
     },
+    data() {
+      return {
+        currentPage: 5
+      };
+    },
     mounted() {
       this.$nextTick(() => {
         let demos = document.querySelectorAll('.source');

packages/pagination/src/pagination.js

@@ -178,11 +178,7 @@ export default {
         },
 
         handleChange({ target }) {
-          const oldPage = this.$parent.internalCurrentPage;
           this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(target.value);
-          if (oldPage !== this.$parent.internalCurrentPage) {
-            this.$parent.$emit('current-change', this.$parent.internalCurrentPage);
-          }
           this.oldValue = null;
         }
       },
@@ -234,31 +230,17 @@ export default {
     },
 
     handleCurrentChange(val) {
-      const oldPage = this.internalCurrentPage;
       this.internalCurrentPage = this.getValidCurrentPage(val);
-      if (oldPage !== this.internalCurrentPage) {
-        this.$emit('current-change', this.internalCurrentPage);
-      }
     },
 
     prev() {
-      const oldPage = this.internalCurrentPage;
       const newVal = this.internalCurrentPage - 1;
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
-
-      if (this.internalCurrentPage !== oldPage) {
-        this.$emit('current-change', this.internalCurrentPage);
-      }
     },
 
     next() {
-      const oldPage = this.internalCurrentPage;
       const newVal = this.internalCurrentPage + 1;
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
-
-      if (this.internalCurrentPage !== oldPage) {
-        this.$emit('current-change', this.internalCurrentPage);
-      }
     },
 
     getValidCurrentPage(value) {
@@ -299,19 +281,6 @@ export default {
   },
 
   watch: {
-    internalPageCount(newVal) {
-      /* istanbul ignore if */
-      const oldPage = this.internalCurrentPage;
-      if (newVal > 0 && oldPage === 0) {
-        this.internalCurrentPage = 1;
-      } else if (oldPage > newVal) {
-        this.internalCurrentPage = newVal === 0 ? 1 : newVal;
-      }
-      if (oldPage !== this.internalCurrentPage) {
-        this.$emit('current-change', this.internalCurrentPage);
-      }
-    },
-
     currentPage: {
       immediate: true,
       handler(val) {
@@ -339,7 +308,22 @@ export default {
       if (newVal !== undefined) {
         this.$nextTick(() => {
           this.internalCurrentPage = newVal;
+          if (oldVal !== newVal) {
+            this.$emit('current-change', this.internalCurrentPage);
+          }
         });
+      } else {
+        this.$emit('current-change', this.internalCurrentPage);
+      }
+    },
+
+    internalPageCount(newVal) {
+      /* istanbul ignore if */
+      const oldPage = this.internalCurrentPage;
+      if (newVal > 0 && oldPage === 0) {
+        this.internalCurrentPage = 1;
+      } else if (oldPage > newVal) {
+        this.internalCurrentPage = newVal === 0 ? 1 : newVal;
       }
     }
   }

test/unit/specs/pagination.spec.js

@@ -93,6 +93,42 @@ describe('Pagination', () => {
     expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('3');
   });
 
+  it('set currentPage & total', (done) => {
+    vm = createVue({
+      template: `
+        <el-pagination
+          @current-change="handleChange"
+          :current-page="currentPage"
+          :page-size="10"
+          :total="100" />
+      `,
+
+      methods: {
+        handleChange(val) {
+          this.currentPage = val;
+          this.page = val;
+        },
+        resetTotal() {
+          this.total = 30;
+          this.currentPage = 1;
+        }
+      },
+
+      data() {
+        return {
+          currentPage: 10
+        };
+      }
+    }, true);
+
+    expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('10');
+    vm.resetTotal();
+    setTimeout(() => {
+      expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('1');
+      done();
+    }, 50);
+  });
+
   it('pageSizes', () => {
     vm = createTest(Pagination, {
       pageSizes: [10, 15, 35, 50],
@@ -126,7 +162,7 @@ describe('Pagination', () => {
     expect(vm.$el.textContent).to.empty;
   });
 
-  it('jumper: change value', () => {
+  it('jumper: change value', (done) => {
     vm = createVue({
       template: `
         <el-pagination
@@ -150,18 +186,25 @@ describe('Pagination', () => {
     input.focus();
     input.value = -1;
     triggerEvent(input, 'change');
-    expect(vm.page).to.equal(1);
+    setTimeout(() => {
+      expect(vm.page).to.equal(1);
 
-    input.value = 10000;
+      input.value = 10000;
-    triggerEvent(input, 'change');
+      triggerEvent(input, 'change');
-    expect(vm.page).to.equal(10);
+      setTimeout(() => {
+        expect(vm.page).to.equal(10);
 
-    input.value = '我好帅';
+        input.value = '我好帅';
-    triggerEvent(input, 'change');
+        triggerEvent(input, 'change');
-    expect(vm.page).to.equal(1);
+        setTimeout(() => {
+          expect(vm.page).to.equal(1);
+          done();
+        }, 50);
+      }, 50);
+    }, 50);
   });
 
-  it('event:current-change', () => {
+  it('event:current-change', (done) => {
     vm = createVue({
       template: `
         <el-pagination
@@ -184,7 +227,10 @@ describe('Pagination', () => {
     }
 
     prev.click();
-    expect(vm.change).to.true;
+    setTimeout(() => {
+      expect(vm.change).to.true;
+      done();
+    }, 50);
   });
 
   it('event:size-change', done => {
@@ -200,9 +246,10 @@ describe('Pagination', () => {
       data() {
         return { trigger: false };
       }
-    });
+    }, true);
 
     expect(vm.trigger).to.false;
+
     setTimeout(_ => {
       vm.$el.querySelectorAll('li.el-select-dropdown__item')[1].click();
       setTimeout(_ => {