1、新建组件(pagination.vue)
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="page.currentPage"
:page-sizes="[10, 20, 30, 50,100]"
:page-size="page.pageSize"
background :small="small"
layout=" prev, pager, next,total,jumper,sizes"
:total="page.total">
</el-pagination>
</template>
<script>
export default {
name: "pagination",
props:{
page:{type:Object,required:true},
queryOperate:{type:Function,required:true},
isSmall:{type:Boolean }
},
data() {
return {
// 采用小型分页
small:this.isSmall?this.isSmall:false
};
},
methods: {
handleSizeChange: function(val) { // 每页条数切换
this.page.currentPage = 1;
this.page.pageSize = val;
this.queryOperate();
},
handleCurrentChange: function(val) {//页码切换
this.page.currentPage = val;
this.queryOperate();
},
}
};
</script>
<style scoped>
/*引用分页的样式 */
/* @import "../../css/pagination.css"; */
</style>
2、table组件下添加分页组件,先引入组件pagination.vue,tableQuery是表格的查询事件。
调用分页组件:
<pagination :page="page" :queryOperate="tableQuery"></pagination>
page参数在data返回,格式如下:
//分页
page: {
total: 0,
currentPage: 1,
pageSize: 10
},