<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-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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);//默认第一页，当你点击就把点击的那页赋值给currentPage1this.currentPage1=val}},data() {return {currentPage1: 1,//默认显示第一页total:20,//这是总是开始可以直接赋值为空都可以pageSize:5,//每页显示多少条//这个数据是我模仿的，一般是后端给的tableData: [{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'},{date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'},]};},mounted(){console.log(this.tableData);this.total=this.tableData.length //赋值的地方只要不是created都可以，总数}}</script><style></style>
一般情况叫后端写分页，数据少的话可以自己写
