New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mengxiong10 opened this Issue Mar 2, 2017 · 19 comments

Comments

Projects
None yet
@mengxiong10

mengxiong10 commented Mar 2, 2017

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

@haijianyang

This comment has been minimized.

haijianyang commented Mar 6, 2017

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

@ygtzz

This comment has been minimized.

ygtzz commented Mar 14, 2017

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

@mengxiong10

This comment has been minimized.

mengxiong10 commented Mar 15, 2017

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

@haijianyang

This comment has been minimized.

haijianyang commented Mar 15, 2017

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

@hanemiyaai

This comment has been minimized.

hanemiyaai commented Apr 14, 2017

:current-page 设置的值就设置成通过@current-change去改变的值,再手动设置为1时,就会高亮了。
<el-pagination
@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

This comment has been minimized.

Contributor

huguangju commented Apr 27, 2017

一个临时解决方案, 通过 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事件

@857681664

This comment has been minimized.

857681664 commented Jan 3, 2018

加.sync修饰符看看

@fengyun2

This comment has been minimized.

fengyun2 commented May 31, 2018

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

@alvin-xu

This comment has been minimized.

alvin-xu commented Jun 29, 2018

+1

@ziyoung

This comment has been minimized.

Contributor

ziyoung commented Jun 29, 2018

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

@alvin-xu

This comment has been minimized.

alvin-xu commented Jun 29, 2018

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

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

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

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

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

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

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

@hardmanhong

This comment has been minimized.

hardmanhong commented Sep 26, 2018

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

@fengyun2

This comment has been minimized.

fengyun2 commented Oct 5, 2018

这么久了,还没有人处理么?

@luoye-fe

This comment has been minimized.

luoye-fe commented Oct 12, 2018

触发条件:

1、total 初始化为 0

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

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

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

@luoye-fe

This comment has been minimized.

luoye-fe commented Oct 12, 2018

if (isNaN(newVal)) {
newVal = oldVal || 1;
} else {
newVal = this.getValidCurrentPage(newVal);
}

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

@xuejiangjun

This comment has been minimized.

xuejiangjun commented Oct 16, 2018

触发条件:

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

This comment has been minimized.

luoye-fe commented Oct 18, 2018

触发条件:
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

This comment has been minimized.

hehe1111 commented Nov 30, 2018

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-iftotal 为 0 时不渲染,有了值之后再进行渲染。

Thx~

@hexufeng

This comment has been minimized.

hexufeng commented Dec 4, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment