1,在表格下方写入
<el-pagination ref="pager1"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
data () {
return {
pageIndex: 1,
pageSize: 10,
totalPage: 0,
}
},
3.methods中:
XXXXXXData () {
this.$http({
url: this.$http.adornUrl('/后台数据连接'),
method: 'get',
params: this.$http.adornParams({
'name': this.listQuery.name, //这里是我项目的搜索框
'page': this.pageIndex, //当前页
'limit': this.pageSize //每页显示范围
})
}).then(({data}) => {
if (data && data.code === 0) {
this.tableData = data.page.list // 把传回来数据赋给tableData(列表中的数据)
this.totalPage = data.page.totalCount //数据总条数
} else {
this.tableData = []
this.totalPage = 0
}
console.log(JSON.stringify(data))
}).catch(function (error) { //这句话可以忽略,如有错误在控制台显示错误
console.log(error)
})
},
4.要写上下面两个方法,不然点击换页数据是不换页的。注意我调用的XXXXXXData(),如果你是已经调用好后台数据,修改一下第三步,把第四步这里的XXXXXXData()换成你有后台连接的那个方法就好了
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.XXXXXXData()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.XXXXXXXData()
},
5.可能每个人后台返回的json格式不一样,我的是这种格式的,根据自己后台传过来的格式进行适当修改
{
"msg":"success",
"code":0,
"page":
{
"totalCount":数据条数,
"pageSize":每页显示条数,
"totalPage":分页数,
"currPage":当前所在页数,
"list":[{
表格数据...
}]
}
}