Vue+Element-U实现分页显示效果
本文实例为大家分享了Vue+Element-U实现分页显示效果的具体代码,供大家参考,具体内容如下
当我们从后端返回的数据量很大,并且根据需求我们需要将返回的数据全部都显示在页面中,默认情况下会把所有的数据全部显示在一个页面,这样非常影响视觉和页面的使用,所以需要使用分页
我这次使用的是Vue4.0 + Element-UI组件,Element-UI库非常的丰富,它提供了一个分页组件 Pagination
展示效果:这个是获取两个时间段的上机记录
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:这个是一个方法,当在页面改变每页显示的条数时,会触发该方法
@current-change:点击当前页改变的时候会触发该方法
:current-page:当前页数
:page-sizes:个数选择器的选项设置
: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语句,其他层的代码我就不在这里列出
可以看到 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 写到了前端,所以就无需在后端重复写
# 查询8条数据,索引从5到12,第6条记录到第13条记录 select * from t_user limit 5,8;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 我们这里介绍php与KindEditor编辑器使用时如何利用KindEditor编辑器的分页功能实现文章内容分页,KindEditor编辑器在我们点击分页时会插入代码,我们只要以它为分切符,就...2016-11-25
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23