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 相关文章推荐
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
JavaScript中return false的用法
Mar 12 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
js判断是否是手机页面
Mar 17 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
vue addRoutes路由动态加载操作
Aug 04 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个人网站架设连环讲(四)
2006/10/09 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
javascript instanceof 内部机制探析
2010/10/15 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
师范生见习报告
2014/10/31 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
Redis中一个String类型引发的惨案
2021/07/25 Redis
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS