所用iview版本号: ^2.14.3
page组件:
on-page-size-change事件会触发on-change事件。
具体表现是:在页码(pageNumber)不为1时,切换条数(pageSize),会先触发on-page-size-change改变了当前的pageSize,并根据改变后的pageSize和当前的pageNumber请求数据,之后触发on-change事件,将pageNumber置为1,根据改变后的pageNumber和pageSize进行请求。
iview中具体的代码如下:
changePage (page) { // 改变页码
if (this.currentPage != page) {
this.currentPage = page;
this.$emit('update:current', page);
this.$emit('on-change', page);
}
},
onSize (pageSize) { // 改变分页条数
this.currentPageSize = pageSize;
this.$emit('on-page-size-change', pageSize);
this.changePage(1);
},
onPage (page) {
this.changePage(page);
},
官方文档的更新日志中,在2.0.0-rc.12版本中做了修复,但是在我所用的版本又出现了这个问题。。。。
http://v2.iviewui.com/docs/guide/update#2.0.0-rc.12
看了一下最新的版本,好像没有更改这个问题,源码依然一样
解决方式:使用isChangePage作为是否改变页数的判断,在on-change中,如果为true,则返回false,否则执行后续操作。在on-page-size-change中,设置isChangePage为true,设置pageNumber为1,且在请求后将isChangePage为true,由源码可知在改变分页数目时,会将pageNumber置为1,由源码可知在改变分页数目时,会将pageNumber置为1。这样可以只执行一次请求。