vue实现分页功能
更新时间:2021年08月31日 14:50:34 作者:waillyer
这篇文章主要为大家详细介绍了vue实现分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现分页功能的具体代码,供大家参考,具体内容如下
- 使用组件分页
- 自己写分页
一、组件分页
<el-pagination
layout="prev, pager, next"
@current-change="changePageNum"
:current-page="pageNum"
:page-size="pageSize"
:total="total">
</el-pagination>
data(){
return{
tableData: [],
total: 0,//总数
pageNum: 1,//当前页
pageSize: 15,//每页显示数量
}
}
mounted: function () {
this.query();//加载页面时,获取数据
},
methods:{
//切换页码
changePageNum: function (val) {
this.pageNum = val;
this.query();
},
//通过接口,获取数据
query: function () {
var data = {
name: this.name || '',
fleetId: this.FleetId,
pageNum: this.pageNum,//当前页
pageSize: this.pageSize//查询个数
};
RoleManage.getRole(data)
.then(res => {
var data = res;
if (res.success) {
this.tableData = data.obj.list;
this.total = data.obj.total;
this.name ='';
} else {
this.$message('查询失败');
}
}).catch(err => {
// 异常情况
console.log(err);
});
},
}
组件分页效果

二、自己构建分页
有些时候需要根据需求自己写分页
1、分页样式

2、上下切页
//调度-系统通讯录分页
dispatchCourentPage: 1,
//调度-系统通讯录当前选中标签标记
dispatchCourentIndex: 1,
//调度-系统通讯录更多标记项:组id
dispatchMorecommandGroupId: '',
dispatchTotlePage: 0,
//上页
handleLastPage() {
if (this.dispatchCourentPage === 1) return;
this.dispatchCourentPage -= 1;
let index = this.dispatchCourentIndex;
if (this.dispatchMorecommandGroupId != '') {
this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);
} else {
this.queryBookmember(index);
}
},
//下页
handleNextPage() {
if (this.dispatchCourentPage === this.dispatchTotlePage) return;
this.dispatchCourentPage += 1;
let index = this.dispatchCourentIndex;
if (this.dispatchMorecommandGroupId != '') {
this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);
} else {
this.queryBookmember(index);
}
}
三、使用监听属性控制分页显示
computed: {
limitData() {
let data = [...this.table1Datas];
return data;
},
// 因为要动态计算总页数,所以还需要一个计算属性来返回最终给 Table 的 data
dataWithPage() {
const data = this.limitData;
const start = this.current * this.size - this.size;
const end = start + this.size;
return [...data].slice(start, end);
},
}
四、js控制分页,计算总页数
方法1
/**
*根据数据条数与每页多少条数据计算页数
* totalnum 数据条数
* limit 每页多少条
*/
pageCount(totalnum, limit) {
return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit)
? (parseInt(totalnum / limit) + 1)
: (totalnum / limit))) : 0;
},
方法2
/**
* 分页的总页数算法
* 总记录数:totalRecord
* 每页最大记录数:maxResult
*/
function pageCount() {
totalPage = (totalRecord + maxResult -1) / maxResult;
}
方法3 推荐
totalPage = Math.floor((totalRecord +maxResult -1) /maxResult );
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
使用vue打包时vendor文件过大或者是app.js文件很大的问题
这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
vue中使用[provide/inject]实现页面reload的方法
这篇文章主要介绍了在vue中使用[provide/inject]实现页面reload的方法,文中给大家提到了在vue中实现页面刷新不同的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
vue3 座位选座矩阵布局的实现方法(可点击选中拖拽调换位置)
由于公司项目需求需要做一个线上设置考场相关的座位布局用于给学生考机排号考试,实现教室考场座位布局的矩阵布局,可点击选中标记是否有座无座拖拽调换位置横向纵向排列,本文给大家分享实现代码,一起看看吧2023-11-11


最新评论