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

Element-pagination分页组件修改current-page属性,不能正确渲染当前页码的问题(从组件源码查找问题),第1张

需求:使用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 / 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;
},

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1297344.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存