父组件index.vue
<template>
<div class="main">
<el-table :data="newTableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<pagination
:page-size="pageSize"
:page-sizes="pageSizes"
:current-page="currentPage"
@size-change="sizeChange"
@current-change="currentChange"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</pagination>
</div>
</template>
<script>
import pagination from "@/components/pagination.vue";
export default {
data() {
return {
pageSize: 3,
pageSizes: [3, 5, 10],
currentPage: 1,
total: 50,
tableData: [
{
date: "2016-05-02",
name: "王小虎1",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎3",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎4",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎5",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎6",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎7",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎8",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎9",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎10",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎11",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎12",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎13",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎14",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎15",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎16",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎17",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎18",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎19",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎20",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎21",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎22",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎23",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎24",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎25",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎26",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎27",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎28",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎29",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎30",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎31",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎32",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎24",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎33",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎34",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎35",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎36",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎37",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎38",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎39",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎40",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎41",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎42",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎43",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小44",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎45",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎46",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎47",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎48",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎49",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-03",
name: "王小虎50",
address: "上海市普陀区金沙江路 1516 弄"
},
],
newTableData: []
};
},
components: {
pagination
},
mounted() {
this.newTableData = this.tableData.slice(
this.pageSize * (this.currentPage - 1),
this.pageSize * this.currentPage
);
this.total = this.tableData.length;
},
methods: {
sizeChange(side) {
this.pageSize = side;
// console.log(`当前是${side}页,${this.pageSize},123456`);
},
currentChange(index) {
this.currentPage = index;
// this.$data.currentPage = index
// console.log(this.currentPage, "-----");
// console.log(`当前是${index}页,123456`);
}
},
watch: {
currentPage(){
this.newTableData = this.tableData.slice(
this.pageSize * (this.currentPage - 1),
this.pageSize * this.currentPage);
},
pageSize(){
this.newTableData = this.tableData.slice(
this.pageSize * (this.currentPage - 1),
this.pageSize * this.currentPage);
}
}
};
</script>
子组件pagination.vue
<template>
<div class="block">
<!-- <span class="demonstration">完整功能</span> -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="pageSize"
:page-sizes="pageSizes"
:current-page="currentPage"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
props:{
currentPage:{
type: Number
},
pageSize:{
type: Number
},
pageSizes:{
type: Array
},
total:{
type: Number
}
},
methods: {
handleSizeChange(val) {
this.$emit("size-change",val);
// console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.$emit("current-change",val);
// console.log(`当前页: ${val}`);
}
},
}
</script>
<style>
.el-pagination {
margin-top: 20px;
}
</style>
效果图