Pagination: enable not set total, add page-count prop. (#834)

CHANGELOG.md

@@ -14,6 +14,7 @@
 - 修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题
 - 改善 tabs 现在支持动态更新
 - Table 新增 highlightCurrentRow 属性、新增 current-change 事件
+- Pagination 新增 pageCount 属性
 
 #### 非兼容性更新
 

examples/docs/zh-cn/pagination.md

@@ -181,11 +181,12 @@
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| small              |   是否使用小型分页样式     | Boolean |      —       | false |
-| page-size              | 每页显示条目个数                                                   | Number |      —       | 10 |
-| total | 总条目数 | Number | — | 0 |
-| current-page | 当前页数 | Number | — | 0|
-| layout | 组件布局，子组件名用逗号分隔。| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
+| small | 是否使用小型分页样式 | Boolean | — | false |
+| page-size | 每页显示条目个数 | Number | — | 10 |
+| total | 总条目数 | Number | — | - |
+| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能如果要支持 page-sizes 的更改，则需要使用 total 属性；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | - |
+| current-page | 当前页数 | Number | — | 1 |
+| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |
 
 ### Events

packages/pagination/src/pagination.js

@@ -17,10 +17,9 @@ export default {
 
     small: Boolean,
 
-    total: {
-      type: Number,
-      default: 0
-    },
+    total: Number,
+
+    pageCount: Number,
 
     currentPage: {
       type: Number,
@@ -53,7 +52,7 @@ export default {
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></jumper>,
-      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.pageCount } on-change={ this.handleCurrentChange }></pager>,
+      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange }></pager>,
       next: <next></next>,
       sizes: <sizes></sizes>,
       slot: <slot></slot>,
@@ -107,7 +106,7 @@ export default {
             class={
               [
                 'btn-next',
-                { disabled: this.$parent.internalCurrentPage === this.$parent.pageCount }
+                { disabled: this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
               ]
             }
             on-click={ this.$parent.next }>
@@ -189,7 +188,7 @@ export default {
               class="el-pagination__editor"
               type="number"
               min={ 1 }
-              max={ this.pageCount }
+              max={ this.internalPageCount }
               domProps-value={ this.$parent.internalCurrentPage }
               on-change={ this.handleChange }
               on-focus={ this.handleFocus }
@@ -204,7 +203,9 @@ export default {
     Total: {
       render(h) {
         return (
-          <span class="el-pagination__total">{ $t('el.pagination.total', { total: this.$parent.total }) }</span>
+          typeof this.$parent.total === 'number'
+            ? <span class="el-pagination__total">{ $t('el.pagination.total', { total: this.$parent.total }) }</span>
+            : ''
         );
       }
     },
@@ -248,39 +249,26 @@ export default {
       }
     },
 
-    // XXX: 暂时没有到第一页和最后一页的交互
-    // first() {
-    //   const oldPage = this.internalCurrentPage;
-    //   const newVal = 1;
-    //   this.internalCurrentPage = this.getValidCurrentPage(newVal);
-
-    //   if (this.internalCurrentPage !== oldPage) {
-    //     this.$emit('current-change', this.internalCurrentPage);
-    //   }
-    // },
-
-    // last() {
-    //   const oldPage = this.internalCurrentPage;
-    //   const newVal = this.pageCount;
-    //   this.internalCurrentPage = this.getValidCurrentPage(newVal);
-
-    //   if (this.internalCurrentPage !== oldPage) {
-    //     this.$emit('current-change', this.internalCurrentPage);
-    //   }
-    // },
-
     getValidCurrentPage(value) {
       value = parseInt(value, 10);
 
-      var resetValue;
-      if (value < 1) {
-        resetValue = this.pageCount > 0 ? 1 : 0;
-      } else if (value > this.pageCount) {
-        resetValue = this.pageCount;
+      const havePageCount = typeof this.internalPageCount === 'number';
+
+      let resetValue;
+      if (!havePageCount) {
+        if (isNaN(value) || value < 1) resetValue = 1;
+      } else {
+        if (value < 1) {
+          resetValue = 1;
+        } else if (value > this.internalPageCount) {
+          resetValue = this.internalPageCount;
+        }
       }
 
       if (resetValue === undefined && isNaN(value)) {
-        value = this.pageCount > 0 ? 1 : 0;
+        resetValue = 1;
+      } else if (resetValue === 0) {
+        resetValue = 1;
       }
 
       return resetValue === undefined ? value : resetValue;
@@ -288,24 +276,18 @@ export default {
   },
 
   computed: {
-    pageCount() {
-      return Math.ceil(this.total / this.internalPageSize);
+    internalPageCount() {
+      if (typeof this.total === 'number') {
+        return Math.ceil(this.total / this.internalPageSize);
+      } else if (typeof this.pageCount === 'number') {
+        return this.pageCount;
+      }
+      return null;
     }
-
-    // XXX: 暂时没用到
-    // startRecordIndex() {
-    //   const result = (this.internalCurrentPage - 1) * this.internalPageSize + 1;
-    //   return result > 0 ? result : 0;
-    // },
-
-    // endRecordIndex() {
-    //   const result = this.internalCurrentPage * this.internalPageSize;
-    //   return result > this.total ? this.total : result;
-    // }
   },
 
   watch: {
-    pageCount(newVal) {
+    internalPageCount(newVal) {
       /* istanbul ignore if */
       if (newVal > 0 && this.internalCurrentPage === 0) {
         this.internalCurrentPage = 1;

test/unit/specs/pagination.spec.js

@@ -19,8 +19,6 @@ describe('Pagination', () => {
     expect(elm.querySelector('.el-pagination__jump')).to.exist;
     // ->
     expect(elm.querySelector('.el-pagination__rightwrapper')).to.exist;
-    // total
-    expect(elm.querySelector('.el-pagination__total')).to.exist;
   });
 
   it('set layout', () => {
@@ -58,6 +56,33 @@ describe('Pagination', () => {
     expect(vm.$el.querySelectorAll('li.number')).to.length(4);
   });
 
+  it('pageCount', () => {
+    const vm = createTest(Pagination, {
+      pageSize: 25,
+      pageCount: 4
+    });
+
+    expect(vm.$el.querySelectorAll('li.number')).to.length(4);
+  });
+
+  it('will work without total & page-count', (done) => {
+    const vm = createTest(Pagination, {
+      pageSize: 25,
+      currentPage: 2
+    });
+
+    vm.$el.querySelector('.btn-prev').click();
+
+    setTimeout(() => {
+      vm.internalCurrentPage.should.be.equal(1);
+
+      vm.$el.querySelector('.btn-prev').click();
+      vm.internalCurrentPage.should.be.equal(1);
+
+      done();
+    }, 20);
+  });
+
   it('currentPage', () => {
     vm = createTest(Pagination, {
       pageSize: 20,
@@ -206,13 +231,13 @@ describe('Pagination', () => {
     });
     const input = vm.$el.querySelector('.el-pagination__jump input');
 
-    input.value = 1;
+    input.value = 2;
     triggerEvent(input, 'change');
-    expect(vm.page).to.equal(0);
+    expect(vm.page).to.equal(1);
 
     input.value = '我好帅';
     triggerEvent(input, 'change');
-    expect(vm.page).to.equal(0);
+    expect(vm.page).to.equal(1);
   });
 
   describe('click pager', () => {