From 1a634b3c912d906030383e58549a2aae5798f7eb Mon Sep 17 00:00:00 2001 From: FuryBean Date: Fri, 4 Nov 2016 20:04:46 +0800 Subject: [PATCH] Pagination: enable not set total, add page-count prop. (#834) --- CHANGELOG.md | 1 + examples/docs/zh-cn/pagination.md | 11 ++-- packages/pagination/src/pagination.js | 80 +++++++++++---------------- test/unit/specs/pagination.spec.js | 35 ++++++++++-- 4 files changed, 68 insertions(+), 59 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b8023f3d..0e3eeaf2e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ - 修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题 - 改善 tabs 现在支持动态更新 - Table 新增 highlightCurrentRow 属性、新增 current-change 事件 +- Pagination 新增 pageCount 属性 #### 非兼容性更新 diff --git a/examples/docs/zh-cn/pagination.md b/examples/docs/zh-cn/pagination.md index 7664101a1..bed2379fd 100644 --- a/examples/docs/zh-cn/pagination.md +++ b/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 diff --git a/packages/pagination/src/pagination.js b/packages/pagination/src/pagination.js index 974731581..a972a8bca 100644 --- a/packages/pagination/src/pagination.js +++ b/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: , jumper: , - pager: , + pager: , next: , sizes: , 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 ( - { $t('el.pagination.total', { total: this.$parent.total }) } + typeof this.$parent.total === 'number' + ? { $t('el.pagination.total', { total: this.$parent.total }) } + : '' ); } }, @@ -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; diff --git a/test/unit/specs/pagination.spec.js b/test/unit/specs/pagination.spec.js index 88d9fe2e5..d775eedb4 100644 --- a/test/unit/specs/pagination.spec.js +++ b/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', () => {