后端一次返回大量数据,前端做分页处理

简介: 后端一次返回大量数据,前端做分页处理

问题描述:后端接口返回大量数据,没有做分页处理,不支持传参pageNum,pageSize

本文为转载文章,原文章:后端一次返回大量数据,前端做分页处理

1.template中

分页

<el-pagination
  @size-change="handleSizeChange"
  :page-sizes="[10, 20, 50, 100]"
  style="float:right"
  @current-change="currentChangeHandle"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="totalPage"
  layout="total, sizes,prev, pager, next, jumper">
</el-pagination>

对应的模型

 data(){
   return{
     totalPage:0,      // 数据总条数
     currentPage:1,   // 当前页面
     pageSize:10,     // 当前页面显示条数
     dataList: [],    // 页面展示数据
     tableData: []    // 后端获取的总数据
   }
 },

2.script中

获取后端数据

//获取初始数据
getDataList(){
  api.agentDealiyWMExport(this.dataForm).then(res=>{
    if(res.data.HEAD.CODE=='000'){
      this.totalPage=res.data.BODY.total;
      // 获取后端返回所有数据
      this.tableData=res.data.BODY.rows; 
      // 对所有数据进行处理,截取数据前 n条数据,显示到页面上
      this.dataList=this.tableData.slice(0, this.pageSize)
    }
  })
},

改变页数事件

// val 是当前页数
currentChangeHandle (val) {
  this.currentPage=val;
  this.dataList = this.tableData.slice((val - 1) * this.pageSize, val * this.pageSize)
},

改变条数事件

// val每页显示多少条
handleSizeChange(val) {
  this.dataForm.pageSize=val;
  this.dataList = this.tableData.slice((this.currentPage - 1) * val, this.currentPage * val)
},
目录
相关文章
|
4天前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
13 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
5天前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
5天前
|
前端开发
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
|
1天前
|
缓存 前端开发 JavaScript
高效开发现代 Web 应用:从前端到后端的最佳实践
在开发现代 Web 应用时,前端和后端技术的选择对项目的性能、可维护性和用户体验至关重要。本文将探讨如何通过现代工具和框架来优化前端和后端开发流程。我们将分析前端技术(如 React 和 Vue.js)与后端技术(如 Node.js 和 Django)的集成,并提供实际案例来展示如何实现高效开发。无论是对新手还是经验丰富的开发者,本指南都提供了宝贵的洞见和实用的技巧,以帮助提高开发效率并构建出色的 Web 应用。
|
5天前
|
SQL Java 数据库连接
后端框架的学习----mybatis框架(5、分页)
这篇文章介绍了如何在MyBatis框架中实现分页功能,包括使用SQL的`limit`语句进行分页和利用MyBatis的`RowBounds`对象进行分页的方法。
|
4天前
|
存储 前端开发 JavaScript
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
本文介绍了使用Springboot后端和Vue前端实现图片与表单数据一起提交到后端,并保存图片地址到数据库,然后展示存储的图片到前端Vue页面的完整流程。
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
|
4天前
|
JSON 前端开发 Java
前端如何提交数据给后端(包含前端和后端代码)
前端如何提交数据给后端(包含前端和后端代码)
|
4天前
|
SQL Java 数据库连接
后端框架的学习----mybatis框架(5、分页)
这篇文章介绍了如何在MyBatis框架中实现分页功能,包括使用SQL的`limit`语句进行分页和利用MyBatis的`RowBounds`对象进行分页的方法。
|
7天前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
9 0
|
2月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
55 2