vue中element分页查看当前页,vue element 表格分页
这篇文章主要为大家详细介绍了某视频剪辑软件元素-你实现分页显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素-你实现分页显示效果的具体代码，供大家参考，具体内容如下
当我们从后端返回的数据量很大，并且根据需求我们需要将返回的数据全部都显示在页面中，默认情况下会把所有的数据全部显示在一个页面，这样非常影响视觉和页面的使用，所以需要使用分页
我这次使用的是Vue4.0元素-用户界面组件，元素-用户界面库非常的丰富，它提供了一个分页组件页码
展示效果：这个是获取两个时间段的上机记录
超文本标记语言部分：
电子贺卡
div class=block
span style= left:-100 px；位置：相对
span class= demonstration style= margin-right:10px
开始日期
/span
El-date-picker v-model= value 1 type= datetime
占位符=选择日期format=yyyy-MM-dd HH:mm:ss
值-格式=yyyy-MM-dd hh:mm:ss
/El-日期选择器
/span
span style= left:-70px；位置：相对
span class= demonstration style= margin-right:10px
截止日期/span
El-date-picker v-model= value 2 type= datetime
占位符=选择日期值-格式=yyyy-MM-dd HH:mm:ss
format=yyyy-MM-dd hh:mm:ss
/El-日期选择器
/span
埃尔按钮类型="主要"
style= left:-40px；position:relative @ click= lineCrodList
搜索
/el-button
/div
El-table:data= line data style= width:80%；左：60px顶部：20px
El-table-column prop= on time label=上机时间
/El-表格-列
El-table-column prop=停机时间 label=下机时间
/El-表格-列
El-table-column prop=花费现金 label=花费时间
/El-表格-列
El-table-column prop=花费现金 label=花费金额
/El-表格-列
/el-table
El-pagination @ size-change= handlesize change @ current-change= handleCurrentChange :current-page= current page
:page-size=[1，2，5，10] :page-size=pageSize
布局=总计，大小，上一页，分页，下一页，跳转
:total=total
/El-分页
/电子名片
分页控件的代码如下：
El-pagination @ size-change= handlesize change @ current-change= handleCurrentChange :current-page= current page
:page-size=[1，2，5，10] :page-size=pageSize
布局=总计，大小，上一页，分页，下一页，跳转
:total=total
/El-分页
解析：
@size-change:这个是一个方法，当在页面改变每页显示的条数时，会触发该方法
@current-change:点击当前页改变的时候会触发该方法
:current-page:当前页数
:page-sizes:个数选择器的选项设置
:page-size:每页显示的条数
:total:总数据数量
射流研究…代码：
脚本
导出默认值{
data () {
返回{
值1: ,
值2: ,
行数据：[],
用户名： ,
总计：0,//实现动态绑定
页面大小：2,
当前页面：1,
}
},
方法：{
//当改变每页显示条数的选择器时会触发的事件
handleSizeChange (size) {
//每页显示的数量是我们选择器选中的值大小
this.pageSize=size
控制台。日志(这个。pagesize)；//每页下拉显示数据
这个。linecrodlist()；
},
//当改变当前页数的时候触发的事件
handleCurrentChange(当前页面){
这个。当前页面=当前页面；
控制台。日志(这个。当前页面)；//点击第几页
这个。linecrodlist()；
},
//获取用户上机记录的信息分页
异步lineCrodList () {
//调用获取总数数据的方法
这个。计数总计()；
等待这个. http。发布(/行/选择信息，{
用户名：这个。用户名，
按时：this.value1
停机时间：this.value2
支出现金：0,
开始：(这个。当前页-1)*此。页面大小，
页面大小：this.pageSize
}).然后(res={
这个。行数据=结果数据；
console.log(res.data)
})
},
//获取用户总条数
异步counttotal () {
等待这个。$http.post(/Line/selectTotal ，{
用户名：this .用户名，
按时：this.value1，
停机时间：this.value2，
}).然后(res={
this . total=RES . data；
})
}
前端请求时，我们需要向后端发送两个参数，start和pageSize，因为具体的数据是后端通过数据库进行搜索的。
后台的Sql语句，其他层的代码在此不一一列举。
你可以看到极限I，n
I:查询结果的索引值。
n:是查询结果返回的数量。
I和n用逗号隔开。
示例：
#按页显示新闻数据，每页两个，此处显示第一页。
SELECT id，title，author，create date FROM news _ detail LIMIT 0，2
#按页显示新闻数据，每页两个，第二页在此处。
SELECT id，title，author，create date FROM news _ detail LIMIT 2，2
#按页显示新闻数据，每页两个，此处显示第三页。
SELECT id，title，author，create date FROM news _ detail LIMIT 4，2
#公共分页sql
#秒数：分页后每页显示几个新闻项(页面容量)pageSize。
#第一个数字：显示哪一段数据(当前页码pageNo-1)*pageSize
从news_detail中选择id、标题、作者、创建日期
LIMIT(第1页)*pageSize，pageSize
我把(pageNo-1)*pageSize写到前端了，后端就不用重复写了。
#查询8条数据，索引从5到12，记录6到记录13 select * from t_user limit 5，8；
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。