vue分页查询怎么实现,vue分页插件
这篇文章主要为大家详细介绍了某视频剪辑软件实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现分页功能的具体代码，供大家参考，具体内容如下
使用组件分页
自己写分页
一、组件分页
埃尔分页
布局=上一页，翻页，下一页
@current-change=changePageNum
:current-page=pageNum
:page-size=pageSize
:total=total
/El-分页
data(){
返回{
表数据：[],
总计：0,//总数
pageNum: 1，//当前页
pageSize: 15，//每页显示数量
}
}
已安装：函数(){
这个。query()；//加载页面时，获取数据
},
方法：{
//切换页码
changePageNum:函数(瓦尔){
this.pageNum=val
这个。query()；
},
//通过接口，获取数据
查询：函数(){
定义变量数据={
名称：this.name ，
弗利特德：这个。弗利特德，
pageNum: this.pageNum，//当前页
页面大小：this.pageSize//查询个数
};
RoleManage.getRole(数据)。然后(res={
定义变量数据=分辨率
if (res.success) {
这个。tabledata=数据。obj。列表；
这个。总计=数据。obj。总计；
这个。name=
}否则{
这个. $消息(查询失败);
}
}).接住(错误={
//异常情况
控制台。日志(错误)；
});
},
}
组件分页效果
二、自己构建分页
有些时候需要根据需求自己写分页
1、分页样式
2、上下切页
//调度-系统通讯录分页
dispatchCourentPage: 1，
//调度-系统通讯录当前选中标签标记
dispatchCourentIndex: 1，
//调度-系统通讯录更多标记项：组编号
dispatchMorecommandGroupId:" "，
dispatchTotlePage: 0，
//上页
handleLastPage() {
如果(这个。dispatchcourentpage===1)返回；
这个。dispatchcourentpage-=1；
让index=this。dispatchcourentindex
如果(这个。dispatchmorecommandgroupid！=) {
这个。querybookmorebygroupid(这个。dispatchmorecomandgroupid)；
}否则{
这个。querybookmember(索引)；
}
},
//下页
handleNextPage() {
如果(这个。dispatchcourentpage===这个。dispatchtotlepage)返回；
这个。dispatchcourentpage=1；
让index=this。dispatchcourentindex
如果(这个。dispatchmorecommandgroupid！=) {
这个。querybookmorebygroupid(这个。dispatchmorecomandgroupid)；
}否则{
这个。querybookmember(索引)；
}
}
三、使用监听属性控制分页显示
计算值：{
limitData() {
let data=[.这个。表1数据形式]；
返回数据；
},
//因为要动态计算总页数，所以还需要一个计算属性来返回最终给桌子的数据
dataWithPage() {
const data=this.limitData
常数start=this。当前*这个。大小-这个。尺寸；
const end=start this.size
返回[.数据】。切片（开始，结束);
},
}
四、js控制分页，计算总页数
方法1
/**
*根据数据条数与每页多少条数据计算页数
*总数数据条数
*限制每页多少条
*/
页面计数（总数，限制){
返回totalnum 0？((总数限制)?1:((总数%限制)
？(parseInt(totalnum/limit) 1)
:(总数/限额))):0；
},
方法2
/**
* 分页的总页数算法
* 总记录数：总记录
* 每页最大记录数：maxResult
*/
函数pageCount() {
总页数=(总记录最大结果-1)/最大结果；
}
方法3推荐
总页数=数学。下限((总记录最大结果-1)/最大结果)；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。