记vue使用Element UI分页出现的问题

    最近在整理之前项目代码时,无意间发现了几个隐藏的bug,这bug藏得真深啊~~~

    先上代码:



    首先第一个问题就是当我点击分页后(不是在第一页时),再来筛选数据,会发现无论数据是否存在,后端接口都会返回一个空数组。。。这是为什么呢???当我看到我传给后台的参数时,我傻了,原来问题出现在参数上。

    当我点击分页按钮时,会触发current-change事件,参数page也会随之而改变,此时筛选时,page已经不为0,所以才会出现返回空数组的情况。

记vue使用Element UI分页出现的问题_第1张图片

   知道问题原因就很好解决了,找到筛选函数,把参数page设为0即可

记vue使用Element UI分页出现的问题_第2张图片

   当我以为问题也会随之解决时,bug总会出其不意的出现,搞得你措手不及。参数page设为0,可以解决上述问题,但如果返回的数据过多时,就会出现另一个问题,上图片

记vue使用Element UI分页出现的问题_第3张图片

    我是在第二页筛选,然后就会出现上述问题,明明是第一页,为何下面显示的是第二页呢????这真是一波接着一波的惊喜啊,没办法,只能想办法解决了(小问题啦(●'◡'●))解决的方法和上面的一样,给他个初始值就OK了,打开element文档,叮咚,找到了

    就是它了,定义变量,在筛选时把currentPage赋值为1即可。

记vue使用Element UI分页出现的问题_第4张图片

记vue使用Element UI分页出现的问题_第5张图片

   嗯~~~就这么多了,之前测试时都是一两条数据,也没注意到这个隐藏的问题,整理出来,分享给大家,以免重复我的错误。能力有限,有错误的地方欢迎指出。

你可能感兴趣的:(vue,web,vue,elementui)