前端结合elementui实现分页功能

在elementUI中使用table组件完成页面的大概框架，并且使用Pagination分页组件---tips：这里不是重点，不做过多阐述

步骤：

1. 通过Axios把数据全部渲染到页面上
2. 使用el-pagination分页组件，定义分页中的基础数据（每页显示多少数据，数据总条数等）
3. 定义一个新的储存页面数据的newtableData，在获取到数据后暂时存在其中
4. 定义函数getTableData()操作页面数据，tableData = newtableData数组中截取：当前页数-1）*当页显示的条数，当前页数*，每页显示数------>这里就是一个数组中的截取。
5. 通过分页组件的页面改变等事件调用gettableData（）每次给页面重新渲染数据

下面是部分的关键代码

getTableData函数：把整体数据经过截取渲染在tableData中

getTableData(){
        this.tableData = this.newtableData.slice((this.currentPage - 1)*this.number,this.currentPage*this.number)
      },

分页组件获取当前的页面值

handleSizeChange(val) {
        this.number = val
         if(this.searchText === ""){
         this.getTableData()
       }
      },
      //获取当前页面值
    handleCurrentChange(val) {
      this.currentPage = val
       if(this.searchText === ""){
         this.getTableData()
       }
    },

分页组件

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[ 9, 13,20]"
      :page-size="number"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

文章仅供复习以及大家参考用，欢迎大家评论指正