程序地带

vue+element分页的实现


在项目开发的过程中,不可避免的会遇到数据分页的分页的问题。今儿,我们就大概来说一下在vue+element中关于表格分页的知识。 其实,表格的分页可以分为两类。第一类是前端分页,前端分页的实质就是把通过接口把所有的数据返回回来(当然,也有可能是自己的模拟数据),然后通过pageSize(一页展示多少条数据)和pageNum(当前展示第几页)计算得出我们展示那几条数据就可以了,话不多少,我们看代码。


export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.pageNum = 1; //当页面展示的数据发生变化时,跳回到第一页
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val;
this.getTableDataList();
},
getTableDataList(){
//res:{status:200,data:{data:[],total:200},message:'数据查询成功'}
axios.post(url,data).then(res=>{
this.tableData = res.data.data; //实际返回页面的数据,展示的数据还需要计算
this.totalCount = res.data.total;
//这个filterData就是当前页需要展示的数据列表
this.filterData =this.tableData.slice((this.pageNum - 1)*this.pageSize,this.pageNum * this.pageSize)
}).catch(err=>{
console.log(err)
})
}
},
data() {
return {
tableData:[],// 后台返回/模拟的数据
filterData:[],//页面中展示的数据
totalCount:1, //一共有多少条数据
pageNum: 1, //当前展示第几页的数据
pageSize:10, //每页展示几条数据
};
}
}

第二类就是后端分页,至于后端分页就更简单了,我们在前端把后台需要的参数(pageNum,pageSize)传递过去就可以了,后台会根据我们传递过去的条件返回对应条目的数据,我们只需要将数据做展示就可以了。 ps:通常我会将请求数据的方法(在我的博客中,是this.getTableDataList())写在mounted函数中。以便刚进入到页面中就可以看到数据。 以上就是我们这一期的所有内容了,下一期不见不散!!! 欢迎大家一起交流。


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42231723/article/details/112689389

随机推荐

302状态码_计算机网络 HTTP状态码和首部

302状态码_计算机网络 HTTP状态码和首部

本文记录了阅读《图解HTTP》的《HTTP状态码》《HTTP首部》章节的笔记。一、返回结果的HTTP状态码HTTP状态码负责表示客户端HTTP请求的返回结果、标记服务端的处理是否正常、通知出现的错误等...

weixin_39717121 阅读(531)

moveit安装及ur5仿真

moveit安装及ur5仿真

moveit安装及ur5仿真python编程和遇到的问题解决以下使用的是双系统的ubuntu操作win7下双系统参考https://mp.weixin.qq.com/s/1BAFjfzm5qNH9H1...

wgqabc 阅读(133)

http请求中必须具备哪个字段_浅谈HTTP

http请求中必须具备哪个字段_浅谈HTTP

本文原作者:家园工作室研发组成员本文出处:浅谈http​flura.cnHTTP概述HTTP(HyperTextTransferProtocol,超文本传输协议)。Web是...

weixin_39798031 阅读(567)

bootstrap table移动端_Bootstrap —— 神一样的存在

bootstrap table移动端_Bootstrap —— 神一样的存在

如果给你两个小时你能快速的码出一个网页来吗?还要不经能在PC端展现,移动端的展现效果也要得到兼容?你做得到吗?一、框架介绍前两天一个好朋友特别着...

织围巾的小仙女 阅读(218)

janusGraph+hbase+es搭建踩坑记录

janusGraph+hbase+es搭建踩坑记录

janusGraph集群搭建前言软件下载配置步骤hadoop安装zookeeper安装hbase安装elasticsearch安装janusGraph安装测试安装结果问题汇总前言janusGraph的...

UpUpCAI 阅读(195)