<template>
<div>
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
<!-- 限制data的不同段数,造成换页的感觉 -->
<el-table-column prop="date" label="日期" width="140"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<div>
<el-pagination
@current-change="currentChange"
layout="prev, pager, next"
:page-size="pageSize"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
let item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 路'
};
let testData = Array(20).fill(item);
return {
total:20,//数据总条数,后端化,自动决定页数,不会让数组越界的
pageSize: 6,//显示数据条数
currentPage: 1,//初始页面
tableData: testData,//注入假数据数组
}
},
methods:{
currentChange(currentPage){
this.currentPage = currentPage;
}
},
};
</script>