解决Vue+Element-ui表单组件的添加数据-做添加-页面跳转不正确问题

友友们：今日分享来了哦~~~

出现的问题

如果做添加的数据后端直接添加到最后一页，但是添加数据以后，数据显示在最后一页，但是页面仍然显示的是当前页

解决思路：想要立即看到刚才添加的数据，那么需要判断添加的最后一页的数据是不是满的，如果是满的，那么查询在一页的数据，如果不是满的，那么就查询最后一个的数据(利用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>