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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
javascript preload&amp;lazy load
May 13 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 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
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
使用Python绘制图表大全总结
2017/02/11 Python
python使用mysql数据库示例代码
2017/05/21 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
python读文件的步骤
2019/10/08 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Python pip使用超时问题解决方案
2020/08/03 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
出纳员岗位职责风险
2014/03/06 职场文书
给学校的建议书范文
2014/05/15 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
校园广播稿范文
2015/08/19 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
golang 实现并发求和
2021/05/08 Golang