场景

添加数据，删除数据都会导致表格中的页码显示异常
在列表中成功添加数据，但是页码没有到添加数据的那一页

解决方案

在进行添加角色的时候进行判断,在添加数据后刷新页面的时候跳转到最后添加数据的那一页面

export default {
  data() {
    return {
    ...
      pageParams: {
        page: 1, // 当前页
        pagesize: 2 // 每页可以放几条数据
      },
      total: 0,
      currentPage: 1, 
    }
  },
  computed: {
    // 表格中最大的页码
    maxNum() {
      return Math.ceil(this.total / this.pageParams.pageSize)
    },
    // 最后一页是不是满的
    isLastPageFulled() {
      return this.total % this.pageParams.pageSize === 0
    },
    ...
  }
}

添加判断

export default {
  ...
  methods:{
    async doAdd () {
      try {
        ...
        if ( this.isLastPageFulled ) {
          // 如果最后一页是满的，则跳到最大页码的下一页
          this.pageParams.page = maxNum + 1
        } else {
          // 最后一页还可以添加数据，直接跳到最后一页
          this.pageParams.page = maxNum
        }
      } catch (error) {
        ...
      }
    }
  }
}

页码跳转实现，可是页码的高亮不准确，在分页组件中加上一个属性

<el-pagination
  ...
+ :current-page.sync="currentPage"
/>

在刷新当前页面的时候，将当前页面的值传给currentPage

async load () {
  try {
    ...
+   this.currentPage = this.pageParams.page
  } catch (error) {
    ...
  }
}