一个可复用的vue分页组件
不废话,先上组件文件pages.vue:
为乌兰等地区用户提供了全套网页设计制作服务,及乌兰网站建设行业解决方案。主营业务为成都做网站、成都网站建设、乌兰网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
使用方法:
在需要分页的地方使用分页组件标签,比如这里的order.vue:
在data中设置当前页和总页面的默认值
data(){ return { totalPage:1, page:1, } },
考虑一下我们希望我们点击页数按钮后发生什么
首先,点击某页数时路由会改变页数,从路由获取当前页
this.page = this.$route.params.page;
接着,我们希望有一个getorderfromServer方法将当前页数发送给服务器,再将返回的数据更新在页面上
getorderfromServer({ currentPage:this.page })
最后调用的方法:
methods: { // 查询全部订单 getorderfromServer(){ this.loading = true; this.page = this.$route.params.page; getorderfromServer({ currentPage: this.page, orderTimeStart:this.orderTimeStart, orderTimeEnd:this.orderTimeEnd, serviceName:this.serviceName, shopName:this.shopName, status: this.status }).then(({code, data}) => { if (code == 200) { this.Orderlist = data.list; this.totalPage = data.totalPage; } this.loading = false; }).catch(err => { this.tip('服务内部错误', 'error'); this.Orderlist = {}; this.loading = false; }); }, }
注意通过路由对方法作出响应,每次路由改变都调用此方法以更新页面
watch: { $route: 'getorderfromServer' }
还要对路由信息进行改造,让每一页(尤其是第一页)都有路由页数信息,可以对第一页进行重定向以达到目的:
{ path: 'order', redirect: 'order/page/1', }, { path: 'order/page/:page', component(resolve){ require.ensure([], function (require) { resolve(require('../modules/personal/order/myorder.vue')); }, 'modules/personal') }, name:'order', meta: { login: 'none' } },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
文章标题:一个可复用的vue分页组件
网站网址:http://myzitong.com/article/gpcdpp.html