>

element ui 分页器中的踩坑爬坑

这篇博客主要解决两个问题
1.第一个是切换数据源之后如何一直保证页码在第一页高亮
2.第二个是比如你点击到第N页，从第N页点击某行进入新的页面，在点击返回上一页操作时，页码还是在第N页高亮

话不多说直接上场景 
第一种是 我在不刷新组件的情况下，点击了分页，这个时候我如果重新像后台发送请求数据，改变表格数据，但是还是要在第一页高亮，这个时候就需要一个小知识点，往下继续看

**

开始上来的页面是这个

**

这个时候我进行点击换页的操作，点到第二页

点击第二页之后我想点击柱子，或者右边的下拉框切换表格的数据源

这个时候就出现了，我无论如何切换数据源都不能让分页器页码保持在第一页，始终会在我上一次单击分页器的页码上，如下图：因为我上次点击的是第二页，就一直是第二页

当时我翻了element ui 的官方文档发现，有一个分页器有一个属性叫current-page.sync
只需要把它绑定到分页器上

> <div class="block"  v-show="tableNum>10">
>         <el-pagination
>           layout="total,prev, pager, next,jumper"
>           :current-page.sync = "page"
>           @current-change="aTable"
>           :total="tableNum">
>         </el-pagination>
>       </div>

然后在调用页码改变的方法时 ，加入两个小细节
第一个小细节，aTable(1); //加一个参数 1
第二个小细节 ，在aTable()方法里加上 this.page = val
贴出aTable
aTable(val){
let t = this;
t.page = val;
t.params.limit = 10;
t.params.start = (val-1)*10;
t.loadTable = true;
t.$http.post('/api/api/v2/borrow/secoundtypes', qs.stringify(t.params)).then(
res =>{
if(!(res.data.success == 'false')){
console.log("atable");
t.loadTable = false;
t.tableNum = res.data.data.total;
t.tableData = res.data.data.data;
}
},
err =>{
//失败
t.loadTable = false;
});
},

完美解决

第二种情况是切换页码后，点击某行就行跳转，希望返回后，我的页码还是保持再，我离开这个组件之前的页码，如我在A页面有一个表格，点击到某一页后，单击某一行进行跳转

，

比如跳转到页面B，我想在B页面返回上一页即A页面

因为这个时候我的页面因为是有一个刷新动作，我明明也和上面的步骤一样，设置了current-page.sync，也动态的给page赋了值,如上图让page = 4，但是每次页码都会重新跳转到1上，打断点才知道原来是页码先会跳到4，然后又自动跳到1，最后在网上看了很久才知道原来是只要page改变，就会触发@current-change=”aTable”重新执行，而aTable()不传任何参数的时候，页码默认为是1，

> <div class="block"  v-show="tableNum>10">
>         <el-pagination
>           layout="total,prev, pager, next,jumper"
>           :current-page.sync = "page"
>           @current-change="aTable"
>           :total="tableNum">
>         </el-pagination>
>       </div>

结合上面的分析，我们只要跳转回来的时候注意两个细节
细节1
let HistoricalPageNumber = 页码跳转之前保存的页码，
aTable(HistoricalPageNumber);
细节2
同上面的aTable方法
让 this.page = HistoricalPageNumber;

我这说的只是简化版因为我再真正做业务的时候其实比这复杂很多，但是万变不离其中，
我们只需要记住一点页码的跳转必定会触发 @current-change=”aTable”，只有在这个aTable方法里给page赋值才会最后生效，其余地方的赋值最后都会被这个方法给覆盖掉，如果这个方法里没有对page赋值就一直默认是1

随便说一下 我保存历史页码的方法是用sessionStroage，不知道伙伴们是否有别的好办法

如果对你有用请点赞留言，如果还有什么疑问也欢迎留言