vue解决 element 翻页插件：删除最后一页的所有数据后(包括批量删除)，刷新后数据表格为空。

1.分页器组件

 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[8, 12, 16, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

 2.默认当前页为第一页，页容量为8条

data(){
    return{
      page: 1,      //当前页码
      pageSize: 8,  //每页显示的行数
      total: 0,     //总条数
    }
}

 

 3.点击删除的时候进行如下配置

  // 删除角色
    async delRole(id) {
      try {
        // 二次询问
        await this.$confirm('确定删除吗?')
        // 发请求
        await deleteRole(id)
        // 提示用户
        this.$message.success('成功')
        //总页数（每次删除计算总页数）
        let totalPage = Math.ceil((this.total - 1) / this.pageSize)
        //当前页大于总页数代表已经删除最后一条数据 将总页数赋值给当前页 会跳转到上一页
        let page = this.page > totalPage ? totalPage : this.page
        //当页数小于为0 就给它为1页 否则就还是当前页
        this.page = page < 1 ? 1 : page
        // 更新页面
        this.roleLists()
      } catch (error) {
        console.log(error)
      }
    },