起因

最近在做报表表格的展示,对于列表来说都是需要分页的,于是我就按部就班的搞了个分页,测都不测就把代码提交了,就是这么的自信. 结果不一会测试就说怎么搜索不出来数据的呀,当时我立马测试了一下还在群里直接回怼 image.png 结果他来了一句你点第二页,当时我就纳闷了,结果都没有哪里来的第二页给你点

骚操作

结果他是先把条件写到输入框了,不去点搜索框直接去点的第二页(如下图),这时候我只能说厉害,这么玩是吧 image.png

原因

我当时做的时候是把分页的数据和搜索的内容都是放在一个对象里面,直接提交的,这就导致了用户只要输入了搜索内容,只要你点分页的时候它也是会一起传递上去的,它点击页面变更了就把当前页的页码也带上去了,而且返回的时候页码没有变更

data: {
        pageParm: {
            page: 1,
            totalCount: 100,
            limit: 10,
            name: ""
        },
    },
methods: {
        handleSizeChange: function (val) {
            this.pageParm.limit = val;
            vm.reload();
        },
        handleCurrentChange: function (val) {
            this.pageParm.page = val;
            vm.reload();
        }
}

解决方案

既然问题出来了,那就只能看问题出在哪里咯,然后发现是组件:current-page这个属性它没有自动变更,需要加上.sync它才会更新 原来的写法

<el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageParm.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageParm.totalCount"
                    style="margin-right: 50px">
            </el-pagination>

更改后的写法

<el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageParm.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageParm.totalCount"
                    style="margin-right: 50px">
            </el-pagination>