iview Page组件调用@on-page-size-change方法会先调用@on-change

8 篇文章 1 订阅
1 篇文章 0 订阅

问题描述:

当页码不在第一页的时候,去更改每页条数,页面展示错误。
例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据
开始用的代码如下:

            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条数据)
实现了场景二:在不是第一页的时候去切换每页条数可以站是为第一页且每条数据为新设置的内容。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值