element-ui 頁面跳轉記住 currentPage 以及 pageSize

遇到BUG

        返回列表頁面時,分頁組件獲取到了currentPage,pageSize,但只有pageSize生效,currentPage始終是1.

背景: vue 封裝   el-pagination

需求:在列表點擊某一列查看詳情,查看完成之后返回到跳轉前列表所在的頁面以及頁面的size.

代碼:

1,列表跳轉

<router-link :to="{path:'/list/detail',query:{id:scope.row.id,currentPage:page,pageSize:size}}">查看詳情</router-link>

列表跳轉時,傳`currentPage`,`pageSize`

2,詳情返回

<router-link :to="{path:'/list',query:{currentPage:page,pageSize:size}}">返回</router-link>

3,el-pagination組件接收參數

export default {
        data(){
            return {
                currentPage:Number(this.$route.query.currentPage) || 1,
                pageSize:Number(this.$route.query.pageSize) || 10,
　　　　　　
            }
        }
}

此時可以從路由中獲取到當前頁面的`currentPage`,`pageSize`數值

4,el-pagination 組件列表參數監控

watch:{
    tableData(n,o){
        console.log(this.currentPage)
　　　　　console.log(this.pageSize)
        this.emitList()
　　}
}

 

監控父組件傳來的`tableDate`,可以發現`tableDate`執行了2次

>第一次打印的是當前頁面的信息`currentPage=5`,`pageSize=20,tableDate=[]`

>第二次打印的是當前頁面的信息`currentPage=1`,`pageSize=20,tableDate=[{d}...]`

因此列中始終是處在第1頁頁面的.

 

5,el-pagination current-change

<template>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout=" sizes,total, prev, pager, next, jumper,->"
            :total="tableData.length">
    </el-pagination>
</template>

handleCurrentChange(val) {
                this.currentPage = val;
                this.emitList()
            }

度娘上有人說,是因為`tableDate`發生改變,會再一次執行`current-change`事件,經實驗,並未執行該函數.

6,el-pagination total

分頁的`total`是根據父組件傳入`tableDate`獲取長度得到的,第一次父組件異步查詢時間延遲,得到的是`tableDate.length = 0`,因此會重新賦值`currentPage = 1`
解決方法:重新獲取路由中的參數,在`tableDate`拿到父組件傳入的實際列表時,覆蓋被重置的`currentPage = 1`

watch:{
            tableData(n,o){
                    this.currentPage = Number(this.$route.query.currentPage) || 1;
                    this.pageSize = Number(this.$route.query.pageSize) || 10;
                    this.emitList()
            }
        },

以上就可以跳轉到列表之前的頁面了.

 

7.寫在最后

解決方法較為粗糙,因項目只是報表項目,僅有查看功能,因此未考慮刪除功能所帶來的影響.如果有刪除功能,應進一步完善初始化的邏輯處理,比如刪除了最后一頁僅有的一項,當然組件也許是有內部處理邏輯,但筆者並未測試.