一个可复用的vue分页组件
发布时间：2020-12-17 02:58:14 所属栏目：百科 来源：网络整理
导读：不废话，先上组件文件pages.vue: 0" 1" slider" ... slider" ... li class="pages-next" a v-if="pageNow != pageTotal" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel
|
不废话，先上组件文件pages.vue: <li class="pages-next"> 使用方法：在需要分页的地方使用分页组件标签，比如这里的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;
});
},}
注意通过路由对方法作出响应，每次路由改变都调用此方法以更新页面 还要对路由信息进行改造，让每一页（尤其是第一页）都有路由页数信息，可以对第一页进行重定向以达到目的： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |