使用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: "刪除成功!"
  });
}

這樣問題就解決了，希望可以幫到你