github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/1356/head
Furybean 2016-11-24 16:03:00 +08:00 committed by 杨奕
parent a3f570789c
commit 4617526367
4 changed files with 105 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
examples/docs/en-US/pagination.md
View File

@ -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}`);
}
},

20
examples/docs/zh-CN/pagination.md
View File

@ -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');

46
packages/pagination/src/pagination.js
View File

@ -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;
}
}
}

69
test/unit/specs/pagination.spec.js
View File

@ -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;
triggerEvent(input, 'change');
expect(vm.page).to.equal(10);
input.value = 10000;
triggerEvent(input, 'change');
setTimeout(() => {
expect(vm.page).to.equal(10);
input.value = '我好帅';
triggerEvent(input, 'change');
expect(vm.page).to.equal(1);
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
@ -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(_ => {