一个可复用的vue分页组件

一个可复用的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'

}

},

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。