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 相关文章推荐
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
完美的js图片轮换效果
Feb 05 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
原生JS无缝滑动轮播图
Oct 22 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动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
matplotlib绘制动画代码示例
2018/01/02 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python多图片合并PDF的方法
2019/01/03 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Python实现图像的垂直投影示例
2020/01/17 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
交通安全演讲稿
2014/01/07 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
高三高考决心书
2014/03/11 职场文书
施工安全标语
2014/06/07 职场文书
合同意向书范本
2014/07/30 职场文书
高中学生自我评价范文
2014/09/23 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
大班下学期幼儿评语
2014/12/30 职场文书