前端处理

 <template>
    <div>
 
 <!-- 分页处理 start -->
 <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)">
  
  <!-- 序号处理 -->
    <el-table-column type="index" align="center" label="序号" :index="indexFn"></el-table-column>

 </el-table>
 <!-- 分页处理 end -->

    <!-- 分页组件 start -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 50, 100, 200]" :page-size.sync="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    <!-- 分页组件 end -->
    </div>

</template>

<script>
  export default {
     data () {
      return {
        pagesize:10,
        currentPage:1
        }
     }
  },
  methods:{
     // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    
    // 序号处理
     indexFn (index) {
      return (this.currentPage - 1) * this.pagesize + index + 1
    },
  }
</script>

后端处理

由于后端对数据进行处理,所以我们发送请求的时候,只需要发送对应的页码和条数请求数据就可以了

     <el-table :data="tableData">
  
  <!-- 序号处理 -->
    <el-table-column type="index" align="center" label="序号" :index="indexFn"></el-table-column>

 </el-table>
 
 
  <!-- 分页组件 start -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 50, 100, 200]" :page-size.sync="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    <!-- 分页组件 end -->
    
 
 <script>
  export default {
     data () {
      return {
        pagesize:10,
        currentPage:1,
        
        PageInfo:{
            page:1, // 页数
            limit:10 // 条数
            }
        }
     }
  },
  methods:{
     // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
      this.PageInfo.limit = val
      
       // 重新发送请求
      this.getList()
    },
    // 当前页改变时触发 重新获取请求
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.PageInfo.page = val
      // 重新发送请求
      this.getList()
    },
    
    // 序号处理
     indexFn (index) {
      return (this.currentPage - 1) * this.pagesize + index + 1
    },
    
    // 封装获取接口请求
   async getList(){
        const {data} = await 请求接口(this.PageInfo)
        
        <!-- 将获取到的数据赋值给tableData -->
        this.tableData = data
    }
  }
</script>