ElementUi中el-table分页效果
现实的场景中很经常遇到表格el-table数据过多,为了更好的用户体验,所以我们需要用到分页,一般分页可以视数据量的大小可分为前端控制和后端控制。
先看下效果(已做脱敏处理)
图1 前端el-table分页效果
这里就把ElementUi官方的例子进行修改来说明
<template> <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :stripe="stripe" :current-page.sync="currentPage" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </template>
<script> export default { data(){ return{ stripe:true,//是否为斑马纹 table tableData: [], currentPage:1, pagesize:10, total:0, } }, methods:{ handleSizeChange(val) { this.pagesize=val; }, handleCurrentChange(val) { this.currentPage = val; }, } } <script>
分页的核心是tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)这一句代码,利用了slice方法把数据源tableData进行分割,但实际上是请求了所有的数据,如图2所示,然后实现前端假分页显示。
图2 实际tableData请求了所有的数据,共13条数据
还有一种分页的思想就是给后台传入如上的参数currentPage和pagesize的值,告诉后台,我们需要[(currentPage-1)*pagesize,currentPage*pagesize]这一个区间的数据,让后台返回来。
这两种方法各有利弊,如果是前者前端控制分页的方法,因为本质是请求了所有的数据,如果这个数据量非常大,涉及到了几百,几千甚至几万数据,第一页的table数据加载的时间就会非常慢,因为它把后面的数据都拿过来了,用户体验非常不好,对内存空间也很不友好。明明只显示了几十条的数据,却为此存了几万条的数据,就好比sql语句的select * from和select [需要的字段] from一样,明显后者的效率会好些。但是它也是有好处的,好处就是如果在数据量小的情况下,第一页table加载速度用户也能接受的情况下,用户之后点击切换页面按钮或者直接跳转到哪个页面都不需要发起请求即可显示出数据,速度非常快。
而后者后端控制分页的情况,每次切换页面都得发起请求,毕竟鱼和熊掌不可兼得,我们只能根据实际情况和用户需求做调整。
原文地址:https://www.cnblogs.com/jdWu-d/p/11896668.html
- 我们只能在安全和隐私之间寻求平衡吗?
- Docker Compose 1.18.0 之服务编排详解
- 让IE7/8使用CSS中first-child和last-child样式属性
- dubbo/dubbox 增加原生thrift及avro支持
- Hadoop(十四)MapReduce原理分析
- dubbox 增加google-gprc/protobuf支持
- 统计02:怎样描绘数据
- ActiveMQ笔记(1):编译、安装、示例代码
- centos ssh终端下高亮显示git分支名
- Django ORM模型:想说爱你不容易
- IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
- IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
- ARM处理器:开放者的逆袭
- 从5个方面对比微信小程序和App
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 习题2-3 求平方与倒数序列的部分和
- 浙大版《C语言程序设计(第3版)》题目集 习题2-4 求交错序列前N项和
- 二十五块DIY 带屏幕可远程的温湿度传感器
- 浙大版《C语言程序设计(第3版)》题目集 习题2-5 求平方根序列前N项和
- 浙大版《C语言程序设计(第3版)》题目集 习题2-6 求阶乘序列前N项和
- 案例:ADG环境遇到redo日志member路径有误以及RMAN-6571错误
- 浙大版《C语言程序设计(第3版)》题目集 练习3-2 计算符号函数的值
- 浙大版《C语言程序设计(第3版)》题目集 练习3-3 统计学生平均成绩与及格人数
- 浙大版《C语言程序设计(第3版)》题目集 练习3-4 统计字符
- SQL 语句单引号、双引号的用法
- 浙大版《C语言程序设计(第3版)》题目集 练习3-5 输出闰年
- 浙大版《C语言程序设计(第3版)》题目集 练习3-7 成绩转换
- 浙大版《C语言程序设计(第3版)》题目集 练习3-8 查询水果价格
- 浙大版《C语言程序设计(第3版)》题目集 习题3-1 比较大小
- 浙大版《C语言程序设计(第3版)》题目集 习题3-3 出租车计价