vue table 分页,vue前端分页功能怎么实现
这篇文章主要为大家详细介绍了某视频剪辑软件实现表格分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现表格分页功能的具体代码，供大家参考，具体内容如下
直接上代码：
这里是这里是模板部分，主要由一个需要分页的表格和一个分页器组成。重点在于表格的数据属性用到了一个薄片截取方法。
埃尔表
垂直加载=列表加载
：数据=
list.slice((当前页面- 1) *页面大小，当前页面*页面大小)
element-loading-text=Loading
突出显示-当前行
边界
埃尔-表格-列align=center label=序号宽度=90
模板槽-范围="范围"
{{范围$index 1 }}
/模板
/El-表格-列
埃尔-表格-列标签=头像align=center width=150
模板槽-范围="范围"
埃尔-阿凡达：src=范围。划。阿凡达/艾尔-阿凡达
/模板
/El-表格-列
El-table-column align= center label= UID width= 130
模板槽-范围="范围"
{{ scope.row.UID }}
/模板
/El-表格-列
埃尔-表格-列align=center label=用户名宽度=350
模板槽-范围="范围"
{{ scope.row.username }}
/模板
/El-表格-列
埃尔-表格-列align=center label=游戏ID width=350
模板插槽-scope=“scope”{ scope。划。用户尼克} }/模板
/El-表格-列
埃尔-表格-列标签=授权类型宽度=110 对齐=居中
模板槽-范围="范围"
El-tag:type= scope。划。授权类型标记类型筛选器“{ 0
范围。划。授权类型授权类型过滤器
}}/el标签
/模板
/El-表格-列
埃尔-表格-列align=center label=成功邀请人数宽度=150
模板插槽-scope=“scope”{ scope。划。成功次数} }/模板
/El-表格-列
！-El-table-column align= center label=操作宽度=150
模板槽-范围="范围"
埃尔按钮
type=primary
size=mini
@click=change(范围 index，scope.row)
修改
/el-button
/模板
/El-表格-列-
/el-table
！-分页器-
div class= block style= margin-top:15px
埃尔分页
align=右
@ current-change= handleCurrentChange
：当前页面=当前页面
:page-size=pageSize
布局=上一页，翻页，下一页，总计
背景
:total=filterList.length
单页隐藏
/El-分页
/div
这里是爪哇岛描述语言部分：
导出默认值{
data(){
返回{
当前页面：1//当前页码
页面大小：10//每页显示条数
列表：[]//要显示的表格数据
}
}
方法{
handleCurrentChange(val) {
this.currentPage=val
},
}
}
实现如图效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。