一个可复用的vue分页组件

前端之家收集整理的这篇文章主要介绍了一个可复用的vue分页组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

不废话,先上组件文件pages.vue:

使用方法

在需要分页的地方使用分页组件标签,比如这里的order.vue:

在data中设置当前页和总页面的默认值

考虑一下我们希望我们点击页数按钮后发生什么

首先,点击某页数时路由会改变页数,从路由获取当前页

接着,我们希望有一个getorderfromServer方法将当前页数发送给服务器,再将返回的数据更新在页面

最后调用方法

{ if (code == 200) { this.Orderlist = data.list; this.totalPage = data.totalPage; } this.loading = false; }).catch(err => { this.tip('服务内部错误','error'); this.Orderlist = {}; this.loading = false; }); },}

注意通过路由对方法作出响应,每次路由改变都调用方法以更新页面

还要对路由信息进行改造,让每一页(尤其是第一页)都有路由页数信息,可以对第一页进行重定向以达到目的:

Meta: { login: 'none' } },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/39294.html

猜你在找的Vue相关文章