【无标题】vue+elementUI 纯前端分页

前端分页
重点1

 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">

重点2

   <el-pagination style="margin-top: 10px; text-align: center;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        >
      </el-pagination>

  重点3

   data(){
      return {
       currentPage: 1, // 当前页
      tableData: [], // 从后台拿到的表格数据
      pageSize: 10, // 当前页容量
      }}

  重点4
   /**
 * 切换每页显示的条目数量
 * @param pageSize
 */
handleSizeChange(pageSize) {
  this.pageSize = pageSize;
},
/**
 * 跳转页数
 * @param currentPage
 */
handleCurrentChange(currentPage) {
  this.currentPage = currentPage;
},