Vue+ElementUI的分页的简单实现
1.首先安装Node.js ,安装Vue脚手架 具体安装步骤可以自行百度
2.ElementUI 饿了吗出的快速搭建速成工具 官网
3.在这里我使用的时axios的异步请求,这是Vue自己的一个库在使用时需要先安装,导入 具体方法可以百度
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"//当前显示几条数据
:total="total"//总条数
@current-change="page">
</el-pagination>
export default {
data() {
return {
content:[
{blogid:''},
{userid:''},
{blogauthor:''},
{blogtitle:''},
{blogcontent:''},
{blogcreatetime:''},
{blogupdatetime:''},
{blogremarks:''},
],
pageSize:'',
total:'',
};
},
methods: {
page(currentPage){
axios.get('http://localhost:8181/writeBlog/findAllBlog/'+(currentPage-1)+'/5').then(resp=> {
this.content=resp.data.content
this.pageSize=resp.data.size
this.total=resp.data.totalElements
})
}
},
created() {
axios.get('http://localhost:8181/writeBlog/findAllBlog/0/5')
.then(response=>{
this.content=response.data.content;//这是返回回来的数据集合
this.pageSize=response.data.size
this.total=response.data.totalElements
})
}
}
通过created(){} 实现在刷新页面时将自己所选展示的第几页与总页数,及数据展示出,然后在页面内触发点击事件进行页面跳转
currentPage 是当前第一页,默认是当前第一页,但是在后台查询数据时是从0开始的,所以在这里需要把(currentPage-1)传到后台