当前位置: 首页 > news >正文

vue2中el-table 实现前端分页

一些接口不分页的数据列表,一次性返回大量数据会导致前端渲染卡顿,接口不做分页的情况下前端可以截取数据来做分页
以下是一个例子,被截取的列表和全量数据在同一个栈内存空间,所以如果有表格内的表单编辑,新的值也会事实同步到大列表,所以无需做特殊处理

html

        <el-table:data="tablePageData"><el-table-columnprop="code"label="编号"show-overflow-tooltip></el-table-column><el-table-columnprop="name"label="名称"show-overflow-tooltip></el-table-column></el-table><el-pagination:current-page.sync="tableParams.pageNum":page-size.sync="tableParams.pageSize"layout="total, sizes, prev, pager, next":page-sizes="[200]":total="tableData.length"/>

js

    data() {return {// 全量数据列表tableData: [],tableParams: {pageNum: 1,pageSize: 200,},};},computed: {// 设置分页,直接放到data里截取会导致被拷贝的数据没有被定义,多选框无法被选中tablePageData() {return this.tableData.slice((this.tableParams.pageNum - 1) * this.tableParams.pageSize,this.tableParams.pageNum * this.tableParams.pageSize);}},
http://www.dtcms.com/a/211369.html

相关文章:

  • 第十五章:数据治理之数据目录:摸清家底,建立三大数据目录
  • 大数据如何让智能物流和仓储管理更高效?从预测到自动调度
  • Qwen2.5 VL 语言生成阶段(4)
  • 【Python 中 lambda、map、filter 和 reduce】详细功能介绍及用法总结
  • 2025年上半年软件架构师考试回忆版【持续更新】
  • VS编码访问Mysql数据库
  • spike:一款协议模糊测试器工具包!全参数详细教程!Kali Linux教程!
  • 构建跨平台C/C++项目的基石:现代构建套件设计指南
  • 趋势触发策略
  • 关于spring @Bean里调用其他产生bean的方法
  • vFile文件的精读
  • 酷柚易汛ERP仓储物流解决方案
  • 怎样把B站的视频保存到本地
  • NodeRAG: 基于异构节点的基于图的RAG结构
  • 红黑树简单模拟实现
  • 复杂度讲解
  • 金融科技应用:基于XGBoost与SHAP的信用评分模型构建全流程解析
  • 【项目需求分析文档】:在线音乐播放器(Online-Music)
  • 串扰与反射对信号完整性的影响
  • 大数据治理:理论、实践与未来展望(二)
  • QWidget类关系图
  • 地理特征类相关可视化图像总结
  • Windows逆向工程提升之IMAGE_RESOURCE_DIRECTORY
  • Java 垃圾回收
  • 光模块(Optical Module)的工作原理、技术参数、应用场景及行业趋势
  • 【MPC控制 - 从ACC到自动驾驶】2 车辆纵向动力学建模与离散化:MPC的“数字蓝图”
  • Python学习心得:代码森林的冒险
  • 【笔记】关于synchronized关键字的底层原理之我流理解(未完)
  • 2024 CKA模拟系统制作 | Step-By-Step | 4、题目搭建-权限控制RBAC
  • Netty学习专栏(三):Netty重要组件详解(Future、ByteBuf、Bootstrap)