<template>
<div>
<el-table
<!-- :data="tableData.slice((currentPage1-1)*pageSize,currentPage1*pageSize)分页这步是重点-->
:data="tableData.slice((currentPage1-1)*pageSize,currentPage1*pageSize)"
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>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage1"
:page-sizes="[5, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
console.log(val);
//一页显示多少条
this.pageSize=val
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
console.log(val);
//默认第一页,当你点击就把点击的那页赋值给currentPage1
this.currentPage1=val
}
},
data() {
return {
currentPage1: 1,//默认显示第一页
total:20,//这是总是开始可以直接赋值为空都可以
pageSize:5,//每页显示多少条
//这个数据是我模仿的,一般是后端给的
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
]
};
},
mounted(){
console.log(this.tableData);
this.total=this.tableData.length //赋值的地方只要不是created都可以,总数
}
}
</script>
<style>
</style>
一般情况叫后端写分页,数据少的话可以自己写