vueelementui分页功能,vue element 分页
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现分页效果的具体代码，供大家参考，具体内容如下
页面中渲染的数据不是所有数据，是需要展示的数据，即当前页的数据，默认第一页的数据，这里为演出日期
模板中代码段（渲染数据)
div style= height:76vh；最大毛利：1%
el-table :data=showData
style=宽度：100%
:header-cell-style=headClass
el-table-column type=index
标签=编号
宽度=80
header-align=居中
align= center /El-表格-列
El-表格-列属性=名称
标签=企业名称
宽度=180
header-align=居中
align= center /El-表格-列
El-表格-列属性=日期
标签=注册时间
宽度=150
header-align=居中
align= center /El-表格-列
El-table-column prop=发布号
标签=发布岗位数量
宽度=130
header-align=居中
align= center /El-表格-列
El-table-column prop=检查时间
标签=查看简历次数
宽度=130
header-align=居中
align= center /El-表格-列
埃尔-表-列属性=公司状态
标签=岗位发布权限
宽度=130
header-align=居中
align=居中
模板槽-范围="范围"
span v-if= scope。划。公司状态==1 否/span
span v-else-if=范围。划。公司状态==0 是/span
/模板
/El-表格-列
埃尔-表-列属性=公司状态
标签=查看人才权限
宽度=130
header-align=居中
align=居中
模板槽-范围="范围"
span v-if= scope。划。公司状态==1 否/span
span v-else-if=范围。划。公司状态==0 是/span
/模板
/El-表格-列
El-table-column prop=招聘时间
标签=现场招聘次数
宽度=130
header-align=居中
align= center /El-表格-列
El-table-column prop=窗口发布时间
标签=橱窗发布次数
宽度=130
header-align=居中
align= center /El-表格-列
埃尔-表-列属性=公司状态
标签=企业状态
宽度=130
header-align=居中
align=居中
模板槽-范围="范围"
span v-if= scope。划。公司状态==1
style=color: #1ec6df 启用/span
span v-else-if=范围。划。公司状态==0
style=color: #df721e 禁用/span
/模板
/El-表格-列
埃尔-表格-列固定=右
标签=操作
宽度=280
模板
el-link :underline=false
href=# rel=外部nofollow rel=外部“不跟随”
链接岗位列表/el-link
el-link :underline=false
href=# rel=外部nofollow rel=外部“不跟随”
链接开通记录/el-link
/模板
/El-表格-列
/el-table
/div
模板中代码段（分页部分，与上一段代码同层级)
div class=block
El-pagination:page-size= pagesize
：当前页面=当前页面
布局=上一页，翻页，下一页
:total=companyData.length
@ current-change= handleCurrentChange
@prev-click=upChange
@next-click=nextChange
style= text-align:center；
/El-分页
/div
下面是逻辑实现
1.定义数组
2.初始化赋值第一页的数据
切片()
脚本
导出默认值{
//页面第一次加载显示的数据
已创建(){
这个。showdata=this。公司数据。切片(0，这个。pagesize)；
console.log(显示的数据);
控制台。日志(这个。showdata)；
},
data() {
返回{
//企业名称
公司名称： ,
showData: []，//显示的数据
页面大小：3,//一页的数据条数
当前页面：1,//当前页是从哪页开始
公司数据：[
{
名称： 企业名称1,
日期："2016年5月四日",
出版编号：12,
检查次数：10,
招聘次数：110,
windowPublishTimes: 120，
公司状态：0,
},
{
名称： 企业名称2,
日期："2016年5月四日",
出版编号：12,
检查次数：10,
招聘次数：110,
windowPublishTimes: 120，
公司状态：0,
},
{
名称： 企业名称3,
日期："2016年5月四日",
出版编号：12,
检查次数：10,
招聘次数：110,
windowPublishTimes: 120，
公司状况：1,
},
{
名称： 企业名称4,
日期："2016年5月四日",
出版编号：12,
检查次数：10,
招聘次数：110,
windowPublishTimes: 120，
公司状况：1,
},
{
名称： 企业名称5,
日期："2016年5月四日",
出版编号：12,
检查次数：10,
招聘次数：110,
windowPublishTimes: 120，
公司状况：1,
},
{
名称： 企业名称6,
日期："2016年5月四日",
出版编号：12,
检查次数：10,
招聘次数：110,
windowPublishTimes: 120，
公司状况：1,
},
{
名称： 企业名称7,
日期："2016年5月四日",
出版编号：12,
检查次数：10,
招聘次数：110,
windowPublishTimes: 120，
公司状况：1,
},
],
};
},
方法：{
//选择页
handleCurrentChange(val) {
this.currentPage=val//动态改变
这个。showdata=this。公司数据。切片(
(这个。当前页-1)*此。页面大小，
this.currentPage * this.pagesize
);
},
//上一页
向上更改（值){
控制台。日志(val)；
这个。当前页面-=1；//动态改变
这个。showdata=this。公司数据。切片(
(这个。当前页-1)*此。页面大小，
this.currentPage * this.pagesize
);
},
//下一页
nextChange(val) {
这个。当前页面=1；//动态改变
这个。showdata=this。公司数据。切片(
(这个。当前页-1)*此。页面大小，
this.currentPage * this.pagesize
);
},
},
};
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。