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

15 篇文章 0 订阅
14 篇文章 0 订阅

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

```
所以,当total为0的情况下,设置current-page是不会生效的,始终为1。
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值