Vue

遇到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.写在最后

解决方法较为粗糙,因项目只是报表项目,仅有查看功能,因此未考虑删除功能所带来的影响.如果有删除功能,应进一步完善初始化的逻辑处理,比如删除了最后一页仅有的一项,当然组件也许是有内部处理逻辑,但笔者并未测试.