需求:使用elementUI的分页组件pagination,要实现从页面跳转到列表页时设置当前页码current-page
问题:设置current-page成功,请求接口携带参数正确,pagination组件上页码显示不正确,始终显示为第一页
解决方式:
1、在请求数据后再设置current-page (推荐)
```javascript
<!-- methods -->
await getList()
// 此时的total应该不为0
this.currentPage = 要设置的页码
```
以下两种方式也可以解决,但原理都是要total的值更新后不为0的情况下才能解决。
2、pagination组件加上key(时间戳),每次都重新渲染
3、pagination组件上设置v-if,设置页码后控制v-if重新渲染(要使用nextTick)
原因:
之所以要在请求数据后才进行设置,是因为在pagination源码中,会对传入的current-page属性进行监听,如果total为0,不管设置的页码是多少,最后都是1。
```javascript
<!-- 源码位置 packages/pagination/src/pagination.js -->
watch: {
currentPage: {
immediate: true,
handler(val) {
// 这里的internalCurrentPage 是用作pager组件上的渲染,也就是渲染当前页
this.internalCurrentPage = this.getValidCurrentPage(val);
}
}
}
render(h) {
...
<pager currentPage={ this.internalCurrentPage }
}
<!-- 而在getValidCurrentPage这个方法中,会进行一些特殊情况的判断,保证拿到是正确的页码 -->
getValidCurrentPage(value) {
value = parseInt(value, 10);
// internalPageCount 解释一下这个参数可以理解为 total / pagesize
const havePageCount = typeof this.internalPageCount === 'number';
let resetValue;
if (!havePageCount) {
if (isNaN(value) || value < 1) resetValue = 1;
} else {
if (value < 1) {
resetValue = 1;
} else if (value > this.internalPageCount) {
resetValue = this.internalPageCount;
}
}
if (resetValue === undefined && isNaN(value)) {
resetValue = 1;
} else if (resetValue === 0) {
resetValue = 1;
}
return resetValue === undefined ? value : resetValue;
},
```