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