公用的page组件 pagination.vue:
<template>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="currentpage"
:page-size="pagesize"
:layout="layout"
:total="total">
</el-pagination>
</template>
<script>
export default {
name: 'Pagination',
props: {
pagesize: [Number, String],
currentpage: [Number, String],
total: [Number, String],
options: [Object], // 分页发生变化赋值给options
render: [Function], // 跳转触发的请求
layout: {
type: String,
default: 'sizes, prev, pager, next'
}
},
methods: {
handleCurrentChange(val) {
console.log(333333);
console.log(val);
this.options.page = val -1;
this.render();
}
}
};
</script>
<style>
.el-pagination{
margin-top: 50px;
}
</style>
其他页面进行调用:
1.首先引入组件
import Pagination from './pagination';
2.template中:
<pagination
v-if="pageTotal.total>pageTotal.pageSize"
:currentpage="pageTotal.page"
:total="pageTotal.total"
:pageSize="10"
:render="getData"
layout="prev, pager, next"
:options="pageOption">
</pagination>
3.data中定义变量:
data() {
return {
//分页数据
pageTotal:{
total: '',
pageNum: 10,
page: 0,
pageSize:10
},
pageOption:{
page:0
},
}
},
4.定义getData方法
getData(){
//调用一次获取数据列表的方法
}
5.数据从后台获取