Element-pagination分页组件修改current-page属性，不能正确渲染当前页码的问题（从组件源码查找问题）

需求：使用elementUI的分页组件pagination，要实现从页面跳转到列表页时设置当前页码current-page
问题：设置current-page成功，请求接口携带参数正确，pagination组件上页码显示不正确，始终显示为第一页

解决方式：

1、在请求数据后再设置current-page （推荐）

```javascript

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
watch: {currentPage: {immediate: true,handler(val) {// 这里的internalCurrentPage 是用作pager组件上的渲染，也就是渲染当前页this.internalCurrentPage = this.getValidCurrentPage(val);}}
}
render(h) {...getValidCurrentPage(value) {value = parseInt(value, 10);// internalPageCount 解释一下这个参数可以理解为 total / pagesizeconst 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;
},```

所以，当total为0的情况下，设置current-page是不会生效的，始终为1。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！