使用element-ui时删除最后一页全部数据时显示无数据的bug修复

问题：

element-ui的分页组件在你删除最后一页数据的时候默认的还是会显示在最后一页，此时最后一页已经没有数据了，所以就显示暂无数据，需要手动去跳转到第一页或者重新刷新页面才能看到第一页的数据

解决：

1.如果是删除最后一页的最后一条数据，则要跳转到第一页
2.如果不是则继续显示在当前页中

 

翻页组件

<!-- 分页 
page-size 每页展示的数据条数
total 总数据条数
current-change 页码点击事件
-->
<el-pagination
  background
  layout="prev, pager, next"
  :page-size="pagesize"
  :total="total"
  @current-change="pageChange"
></el-pagination>
</div>
<!-- 
@current-change="pageChange" 直接这样写也行
@current-change="(n)=>pageChange(n)"  相当于下面写法
function(n){
  this.pageChange(n)
}
-->

data数据

total: 0, //用户总条数
pagesize: 2, //每页显示条数
nowpage: 1, //当前页码值

methods方法

//删除时，获取最新页码
    setPage() {
      this.getCount(); //从新获取总数
      let page = Math.ceil((this.total - 1) / this.pagesize); //向上取整计算页数
      let nowpage = this.nowpage > page ? page : this.nowpage;
      this.nowpage = nowpage < 1 ? 1 : nowpage;
      this.getPage(); //获取数据
    },
    //分页
    pageChange(n) {
      this.nowpage = n;
      this.getPage();
    },
    getCount() {
      //获取用户总数 用于计算分页
      this.$axios({
        url: "/api/usercount"
      }).then(res => {
        this.total = res.data.list[0].total;
      });
    },
    getPage() {
      //获取用户数据 分页  page 当前页码  size每页显示几条
      this.$axios({
        url: "/api/userlist",
        params: { page: this.nowpage, size: this.pagesize }
      }).then(res => {
        this.$message({
          type: "success",
          message: "最新数据获取成功"
        });
        this.users = res.data.list;
      });
    },

执行删除操作时调用方法

this.$axios({
url: "/api/userdelete", //请求地址
method: "post", //请求方式 默认get
data: { id: id } //可以简写 data{id}
}).then(res => {
if (res.data.code === 200) {

  this.setPage(), //获取最新页码 并 渲染的效果

  this.$message({
	type: "success",
	message: "删除成功!"
  });
}

这样问题就解决了，希望可以帮到你