友友们:今日分享来了哦~~~
出现的问题
如果做添加的数据后端直接添加到最后一页,但是添加数据以后,数据显示在最后一页,但是页面仍然显示的是当前页
解决思路:想要立即看到刚才添加的数据,那么需要判断添加的最后一页的数据是不是满的,如果是满的,那么查询在一页的数据,如果不是满的,那么就查询最后一个的数据(利用computed)
代码表示:
<template>
<el-pagination
layout="prev, pager, next"
:total="total"
:current-page.sync="curPage" // 当前页码的双向绑定
:page-size="pageParams.pageSize"
@current-change="hCurrentChange"
/>
</template>
<script>
data() {
return {
total: 0,
pageParams: { page: 1, pagesize: 2 }, // 每页显示几条
curPage: 0, // 当前页面
list:[]
}
computed: {
// 当前的最后一页页码
maxPage() {
return Math.ceil(this.total / this.pageParams.pagesize)
},
// 看最后一页是不是满的
isLastPageFulled() {
return this.total % this.pageParams.pagesize === 0
}
},
methods: {
async loadRoles() {
const res = await getRoles(this.pageParams)
// console.log(res)
this.list = res.data.rows
this.total = res.data.total
// 重新更新页码
this.curPage = this.pageParams.page
},
// 改变页码重发请求
hCurrentChange(curPage) {
// 更改页码
this.pageParams.page = curPage
// 重发请求
this.loadRoles()
},
}
</script>