当后端没有分页的时候，一次返回了全部数据， 用 element 中的组件分页并不能对数据进行切割 ，需要请求回数据后，
Vue 使用 Element 组件实现前端自己的分页功能
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
border >
<el-table-column type="index"></el-table-column>
<el-table-column prop="type" label="类型"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="pagesize"
:total="tableData.length"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
pagesize:20, //默认分页每页数据量
currentPage:1, //默认展示第一页数据
methods: {
handleSizeChange: function(val) {
this.pagesize = val;
},
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
},
}
注意：每次请求新数据的时候记得把当前页初始：this.currentPage = 1
