elementui分页组件配合后端接口的使用

分页分为前端分页和后端分页，前端分页是先获取所有数据前端再来分页。性能不好
后端分页就是把数据传给后端，后端返回当前页相应的数据

后端分页：

在表格</el-table>后面加上分页代码，如果是其他的比如列表分页，我估计也是要放在</>外面

<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>

在data里面定义数据

 pagesize:10,
//
每页的数据
tableData: [],
currentPage:1,//第几页
totalCount:1,//总条数 这些数据虽然后面会赋值为后端返回的数，但是最好不要为空
pagesize:10,//每页显示的条数

写在methods里面的方法

//每页几条数据，第几页
getData(n1,n2){
let params = {
"page": n2,
"rows": n1,
//后端接口需要传的参数
}
this.$http.post('后端的url',params)
.then(function(res){
this.tableData = res.data.data.records//具体根据后端返回的数据结构，代码主要是取后端返回的数据
this.totalCount = res.data.data.total//这个是后端返回的总数

}).catch(function(error){
console.log(error)
// 响应错误回调
})
},
//每页显示的条数
handleSizeChange(val){
this.pagesize = val
this.getData(val,1)
this.currentPage = 1
},
//显示第几页
handleCurrentChange(val){
this.currentPage = val
this.getData(this.pagesize,val)
},

写在created里面的方法

 created(){
this.getData(this.pagesize,this.currentPage)
},
//两个参数就是之前data里面设置的数，意思就是页面初始化时需要多少条条数据

最后

以上就是甜美小蝴蝶为你收集整理的elementui分页组件配合后端接口的使用的全部内容，希望文章能够帮你解决elementui分页组件配合后端接口的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。