技術標籤：問題解決前端

1 分頁元件初步介紹

分頁元件最主要的引數有三個

1. current-page 當前頁數,也就是當前的頁面的頁碼,這是重新整理後仍在當前頁的關鍵引數
2. page-size 每頁顯示條目個數，注意別和 page-size 搞混
3. total 總條目數 就是所有資料的總量
   注: 以上引數的值皆為 number 型別,為什麼要強調這個呢?因為在重新整理的時候會用到
   其餘的引數
   ~ background boolean 是否為分頁按鈕新增背景色
   ~ layout string 元件佈局，子元件名用逗號分隔
   ~ current-change currentPage 改變時會觸發的事件

 <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="pageNum"
                    :page-size="10"
                    :total="pageTotal"
                    @current-change="changePage">
 </el-pagination>
 

2 分頁元件的使用

1

// 設定 當前頁數為 1 
 private pageNum = 1;

2 要實現重新整理後頁碼不掉功能,關鍵在於 pageNum 這個值得獲取,這裡我將 page 的值放在 query 中,給了 page 這個引數,如圖所示
注:此時 page 的值為 string,不是太懂為啥 query 傳不了 number ,我寫 number 型別就報錯,因此改為 string

3 在 created 生命週期裡獲取這個 pageNum 的值

  private created() {
        this.pageNum = this.$route.query?.page ? parseInt(this.$route.query.page as string) : 1;
    }
 

4 在點選 分頁按鈕 的時候將當前頁面傳入 query 中的 page 中

  private changePage(pageNum: number) {
        this.$router.push({query: {page: pageNum.toString()}});
    }

5 重新整理後頁碼不掉 關鍵步驟 監聽 query 的變化

// 獲取資料的方法
 private geData() {
    this.pageNum = (this.$route.query && ~~(this.$route.query.page as string)) || 1;
	...xxxx ajax 獲取資料xxx...
}

總結

大概就是這樣了,關於這個還有什麼不懂的,或者沒有實現的,可以在評論區問我,雖然我很菜,但是教學相長嘛,嘿嘿.