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 (
-
+ typeof this.$parent.total === 'number'
+ ?
+ : ''
);
}
},
@@ -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', () => {