Skip to content

Commit

Permalink
Pagination: fix user can not set currentPage in some condition.
Browse files Browse the repository at this point in the history
  • Loading branch information
@furybean @Leopoldthecoder
furybean authored and Leopoldthecoder committed Nov 25, 2016
1 parent a3f5707 commit 4617526
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 52 deletions.
20 changes: 16 additions & 4 deletions examples/docs/en-US/pagination.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand All @@ -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">
Expand All @@ -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"
Expand All @@ -100,20 +100,32 @@ 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>
```
:::
<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}`);
}
},
Expand Down
20 changes: 16 additions & 4 deletions examples/docs/zh-CN/pagination.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand All @@ -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">
Expand All @@ -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"
Expand All @@ -100,8 +100,14 @@
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage: 5
};
}
}
</script>
Expand All @@ -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');
Expand Down
46 changes: 15 additions & 31 deletions packages/pagination/src/pagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
},
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
}
}
}
Expand Down
73 changes: 60 additions & 13 deletions test/unit/specs/pagination.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down Expand Up @@ -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
Expand All @@ -150,18 +186,25 @@ describe('Pagination', () => {
input.focus();
input.value = -1;
triggerEvent(input, 'change');
expect(vm.page).to.equal(1);

input.value = 10000;
triggerEvent(input, 'change');
expect(vm.page).to.equal(10);

input.value = '我好帅';
triggerEvent(input, 'change');
expect(vm.page).to.equal(1);
setTimeout(() => {
expect(vm.page).to.equal(1);

input.value = 10000;
triggerEvent(input, 'change');
setTimeout(() => {
expect(vm.page).to.equal(10);

input.value = '我好帅';
triggerEvent(input, 'change');
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
Expand All @@ -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 => {
Expand All @@ -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(_ => {
Expand Down

0 comments on commit 4617526

Please sign in to comment.