Element: 关于pagination组件 重置currentPage 改变内部状态的问题

[mengxiong10]

初始传入的currentPage = 1, 通过点击组件改变internalCurrentPage = 3
比如 现在外部的列表变化了,外部需要重置Page = 1, 没有办法了.外部的currentPage 本来还是1 ,变化内部无法响应.
这种情况有什么办法吗

[haijianyang]

同问这样的问题，好像只有第一次在外部设置page的值的时候生效，之后再设置就无效了。

[ygtzz]

同问，设置currentPage=1分页1不会高亮，求解决方法？

[mengxiong10]

看了源码, 需要设置@current-change="currentPage = arguments[0]",这样内部外部的currentpage就同步了

[haijianyang]

重新写了一个分页组件，结合vuex使用，用起来和antd的table差不多。

[hanemiyaai]

:current-page 设置的值就设置成通过@current-change去改变的值，再手动设置为1时，就会高亮了。
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-sizes="[10, 20, 50]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="total">

data
data() { return { condition: { queryType: 'phone', queryContent: '' }, userInfoList:[], total: 100, page:{ currentPage: 1, pageSize: 10 } } }

methods中设置的方法：
handleQuery() { let sel = this; sel.page.currentPage = 1; console.log('查询...'); }, handleSizeChange(val) { }, handleCurrentChange(val) { this.page.currentPage = val; }

[huguangju]

一个临时解决方案, 通过 ref 来操作内部属性 internalCurrentPage：

<el-pagination ref="pagination"
            small
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            :current-page="currentPage"
            @current-change="pageChange">

export default {
  data: {
    // ...
    currentPage: 1,
    pRef: null
  },
  mounted() {
    this.pRef = this.$refs.pagination
  },
  methods: {
      someMethod() {
        this.pRef.internalCurrentPage = this.currentPage
        // ...
      }
  }
}

副作用是会再次触发currentChange事件

[zshnb]

加.sync修饰符看看

[fengyun2]

加了.sync修饰符没用，请问有谁解决了这个问题么？

[alvin-xu]

+1

[ziyoung]

@alvin-xu 不太明白你们的意思。写了例子：https://jsfiddle.net/zhiyang/qwsL3g1f/9/ ，不确定是否解决了你们的问题。

[alvin-xu]

@ziyoung 谢谢您。 您这个例子跟我本地现象不太吻合。

我本地 :current-page.sync 绑定的是计算属性，页数存在了vuex中。vuex正确保存当前页数后，我关闭当前页，并重新打开，此时无论我的计算属性拿到的页数是多少，分页组件显示的页数永远是第一页。

总结，所以问题是：分页组件初始化时永远为第一页，:current-page.sync在初始化时无效。

我想直接在您的例子中复现这个问题，但确不行。我本地版本已经跟你用的一致。你的例子是可以正确初始化的。

不过，您的例子给了我灵感。 我发现虽然初始化当前页数无效，但是后续的方法改变页码数是可以的，组件响应正确。

于是，我在created函数中，加了一个延迟800ms函数，来再次初始化组件页码数。算是勉强解决了吧。。。

这绝对是一个Bug，也有可能是跟VueJs一起使用导致的。不清楚。

[hardmanhong]

需求是从编辑页面返回列表页需记住分页，保存再store，返回时设置current-page.sync无效

[fengyun2]

这么久了，还没有人处理么？

[luoye-fe]

触发条件：

1、total 初始化为 0

2、同步操作中改变 currentPage 的值

3、异步操作中改变 total 的值

4、分页组件拿到不合法的 currentPage，将页数改为 1，之后即使 total 大于0，也没有重置 currentPage

[luoye-fe]

https://github.com/ElemeFE/element/blob/c8ce0410f9a2b3d5bdb8027493a42497cc1578f8/packages/pagination/src/pagination.js#L400-L404

主要是这段代码，从逻辑上来讲也没毛病，保证 当前页码 都是合法值，但是上面说的情况就比较尴尬，可以在分页组件上加上 v-if，total 为 0 时不渲染，有了值之后再进行渲染。

[xuejiangjun]

触发条件：

1、total 初始化为 0

2、同步操作中改变 currentPage 的值

3、异步操作中改变 total 的值

4、分页组件拿到不合法的 currentPage，将页数改为 1，之后即使 total 大于0，也没有重置 currentPage

you should set total default value null not 0，设置total的初始值为null而不是0 #1153

[luoye-fe]

触发条件：
1、total 初始化为 0
2、同步操作中改变 currentPage 的值
3、异步操作中改变 total 的值
4、分页组件拿到不合法的 currentPage，将页数改为 1，之后即使 total 大于0，也没有重置 currentPage

you should set total default value null not 0，设置total的初始值为null而不是0 #1153

嗯，THX

[hehe1111]

Thx~

element/packages/pagination/src/pagination.js

Lines 400 to 404 in c8ce041

if (isNaN(newVal)) {
newVal = oldVal || 1;
} else {
newVal = this.getValidCurrentPage(newVal);
}
主要是这段代码，从逻辑上来讲也没毛病，保证 当前页码 都是合法值，但是上面说的情况就比较尴尬，可以在分页组件上加上 v-if，total 为 0 时不渲染，有了值之后再进行渲染。

Thx~

[hexufeng]

好坑啊，total初始化为0时不渲染，修改了它的状态也不渲染。。。初始值置为null就可以了，这让人难以理解。

[fangchaolong]

都发布到了2.11.1版本了还没有解决吗

[zhangyupeng233]

搞好久 初始total = null 解决了我的问题 这个bug不修复也该出个提示

[jay33333]

$refs 中 把他的internalCurrentPage和lastEmittedPage，都重置相同的值，要不然点击值和lastEmittedPage相同，current-change不会触发

[Dangdtx]

v-if="total"
style="margin-left: 59px;"
:current-page.sync="currentPage"
@current-change="pageChange"
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
>

我添加了async之后可以了 你们也试一下看可不可以