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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
JS实现简易计算器
Feb 14 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Python之PyUnit单元测试实例
2014/10/11 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
小学生评语大全
2014/04/18 职场文书
超市活动计划书
2014/04/24 职场文书
一帮一活动总结
2014/05/08 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
python ansible自动化运维工具执行流程
2021/06/24 Python
mysql 索引合并的使用
2021/08/30 MySQL
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技