Vue+Element-U实现分页显示效果


Posted in Javascript onNovember 15, 2020

本文实例为大家分享了Vue+Element-U实现分页显示效果的具体代码,供大家参考,具体内容如下

当我们从后端返回的数据量很大,并且根据需求我们需要将返回的数据全部都显示在页面中,默认情况下会把所有的数据全部显示在一个页面,这样非常影响视觉和页面的使用,所以需要使用分页
我这次使用的是Vue4.0 +  Element-UI组件,Element-UI库非常的丰富,它提供了一个分页组件 Pagination

展示效果:这个是获取两个时间段的上机记录

Vue+Element-U实现分页显示效果

HTML部分:

<el-card>
 <div class="block">
 <span style="left:-100px; position:relative">
  <span class="demonstration" style='margin-right:10px'>
  开始日期
  </span>
  <el-date-picker v-model="value1" type="datetime"
  placeholder="选择日期" format="yyyy-MM-dd HH:mm:ss"
  value-format="yyyy-MM-dd hh:mm:ss">
  </el-date-picker>
 </span>
 <span style="left:-70px; position:relative">
  <span class="demonstration" style='margin-right:10px'>
 截止日期</span>
  <el-date-picker v-model="value2" type="datetime"
 placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
  format="yyyy-MM-dd hh:mm:ss">
  </el-date-picker>
 </span>
 <el-button type="primary" 
style="left:-40px;position:relative" @click="lineCrodList">
 搜索
 </el-button>
 </div>
 <el-table :data="lineData" style="width: 80%;left:60px;top:20px">
 <el-table-column prop="onTime" label="上机时间">
 </el-table-column>
 <el-table-column prop="downTime" label="下机时间">
 </el-table-column>
 <el-table-column prop="spendCash" label="花费时间">
 </el-table-column>
 <el-table-column prop="spendCash" label="花费金额">
 </el-table-column>
 </el-table>
 
 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
 :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total">
 </el-pagination>
 
</el-card>

分页控件的代码如下: 

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
 :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total">
</el-pagination>

解析:

@size-change:这个是一个方法,当在页面改变每页显示的条数时,会触发该方法

Vue+Element-U实现分页显示效果

@current-change:点击当前页改变的时候会触发该方法

Vue+Element-U实现分页显示效果

:current-page:当前页数

:page-sizes:个数选择器的选项设置

Vue+Element-U实现分页显示效果

:page-size:每页显示的条数

:total:总数据数量

JS代码:

<script>
export default {
 data () {
 return {
 value1: '',
 value2: '',
 lineData: [],
 username: '',
 total: 0, //实现动态绑定
 pageSize: 2,
 currentPage: 1,
 
 }
 },
 methods: {
 //当改变每页显示条数的选择器时会触发的事件
 handleSizeChange (size) {
 // 每页显示的数量是我们选择器选中的值size
 this.pageSize = size;
 console.log(this.pageSize);//每页下拉显示数据
 this.lineCrodList();
 },
//当改变当前页数的时候触发的事件
 handleCurrentChange (currentPage) {
 this.currentPage = currentPage;
 console.log(this.currentPage);//点击第几页
 this.lineCrodList();
 },
//获取用户上机记录的信息分页
 async lineCrodList () {
 
 //调用 获取total数据的方法
 this.counttotal();
 await this.$http.post('/Line/SelectInfo', {
 userName: this.username,
 onTime: this.value1,
 downTime: this.value2,
 spendCash: 0,
 start: (this.currentPage-1)* this.pageSize,
 pageSize: this.pageSize
 }).then(res => {
 this.lineData = res.data;
 console.log(res.data)
 })
 },
 //获取用户总条数
 async counttotal () {
 await this.$http.post('/Line/selectTotal', {
 userName: this.username,
 onTime: this.value1,
 downTime: this.value2,
 }).then(res => {
 this.total = res.data;
 })
}

我们前端请求的时候需要给后端发送start 和 pageSize 这两个参数 因为具体的数据是后端通过数据库来搜索的

后台Sql语句,其他层的代码我就不在这里列出

Vue+Element-U实现分页显示效果

可以看到 limit  i,n

i:表示查询结果的索引值

n:为查询结果的返回数量

i 和 n之间用逗号分隔

例子:

#分页显示新闻数据,每页显示两条,这里显示第一页
SELECT id,title,author,createdate FROM news_detail LIMIT 0,2
#分页显示新闻数据,每页显示两条,这里显示第二页
SELECT id,title,author,createdate FROM news_detail LIMIT 2,2
#分页显示新闻数据,每页显示两条,这里显示第三页
SELECT id,title,author,createdate FROM news_detail LIMIT 4,2
#公用的分页sql
#第二个数:分页后每页显示几条新闻(页面容量) pageSize
#第一个数:从第几条数据开始显示(当前页码pageNo-1)*pageSize
SELECT id,title,author,createdate FROM news_detail 
LIMIT (pageNo-1)*pageSize,pageSize

我把(pageNo-1)*pageSize 写到了前端,所以就无需在后端重复写

Vue+Element-U实现分页显示效果

# 查询8条数据,索引从5到12,第6条记录到第13条记录 select * from t_user limit 5,8;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
js 获取时间间隔实现代码
May 12 Javascript
js格式化时间小结
Nov 03 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
vue+Element-ui前端实现分页效果
Nov 15 #Javascript
vue+Element-ui实现分页效果
Nov 15 #Javascript
vue实现抽屉弹窗效果
Nov 15 #Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 #Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 #Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 #Javascript
vue 授权获取微信openId操作
Nov 13 #Javascript
You might like
基于php中使用excel的简单介绍
2013/08/02 PHP
linux下编译安装memcached服务
2014/08/03 PHP
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
js实现select下拉框选择
2020/01/11 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
使用python为mysql实现restful接口
2018/01/05 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
C#的几个面试问题
2016/05/22 面试题
行政主管岗位职责
2013/11/18 职场文书
医院实习接收函
2014/01/12 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
新郎结婚感言
2015/07/31 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
原生JS实现分页
2022/04/19 Javascript
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS
python数字图像处理:图像的绘制
2022/06/28 Python