element-ui页⾯跳转记住currentPage以及pageSize 遇到BUG
返回列表页⾯时，分页组件获取到了currentPage,pageSize，但只有pageSize⽣效,currentPage始终是1.
背景: vue 封装  el-pagination
需求：在列表点击某⼀列查看详情，查看完成之后返回到跳转前列表所在的页⾯以及页⾯的size.
代码:
1，列表跳转
<router-link :to="{path:'/list/detail',query:{w.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)
  }
}
监控⽗组件传来的`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;
}
度娘上有⼈说，是因为`tableDate`发⽣改变，会再⼀次执⾏`current-change`事件，经实验，并未执⾏该函数.
6,el-pagination total
分页的`total`是根据⽗组件传⼊`tableDate`获取长度得到的，第⼀次⽗组件异步查询时间延迟，得到的是`tableDate.length = 0`，因此会重新赋值`currentPage = 1`
解决⽅法：重新获取路由中的参数，在`tableDate`拿到⽗组件传⼊的实际列表时，覆盖被重置的`currentPage = 1`
watch:{tabletotal函数
tableData(n,o){
this.currentPage = Number(this.$route.query.currentPage) || 1;
this.pageSize = Number(this.$route.query.pageSize) || 10;
}
},
以上就可以跳转到列表之前的页⾯了.
7.写在最后
解决⽅法较为粗糙，因项⽬只是报表项⽬，仅有查看功能，因此未考虑删除功能所带来的影响.如果有删除功能，应进⼀步完善初始化的逻辑处理,⽐如删除了最后⼀页仅有的⼀项，当然组件也许是有内部处理逻辑，但笔者并未测试.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。