问题描述:
当页码不在第一页的时候,去更改每页条数,页面展示错误。
例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据
开始用的代码如下:
pIndexChange(i) { //页码改变的回调
this.tableData = []
this.page.index = i;
this.getCoaDetec()//接口调用填充表格,数据展示
},
pSizeChange(s) { //切换每页条数时的回调
this.tableData = []
this.page.size = s;
this.getCoaDetec()
},
原因分析:
去查看组件:node_modules/view-design/src/components/page/page.vue
page.vue中具体的代码如下:组件默认的处理方式是每次改变分页条数,会默认再调用改变页数的方法(this.changePage(1)),将页码置为1。
意味着如果当前页码不为1的话,会再次执行@on-change函数,所以上面代码会执行两次getCoaDetec()。
解决方案:
pIndexChange(i) { //页码改变的回调
this.tableData = []
this.page.index = i;
this.getCoaDetec()//接口调用填充表格,数据展示
},
pSizeChange(s) { //切换每页条数时的回调
this.page.size = s;
if (this.page.index == 1) {
this.tableData = []
this.getCoaDetec();
}
},
实现效果:
实现了场景一:在第一页的时候去切换每页条数可以立刻刷新,(例如在第一页,初始化10条数据,此时切换为20条可以立马展示20条数据)
实现了场景二:在不是第一页的时候去切换每页条数可以站是为第一页且每条数据为新设置的内容。