初始传入的currentPage = 1, 通过点击组件改变internalCurrentPage = 3 比如 现在外部的列表变化了,外部需要重置Page = 1, 没有办法了.外部的currentPage 本来还是1 ,变化内部无法响应. 这种情况有什么办法吗
[ElemeFE/element]关于pagination组件 重置currentPage 改变内部状态的问题
回答
同问这样的问题,好像只有第一次在外部设置page的值的时候生效,之后再设置就无效了。
同问,设置currentPage=1分页1不会高亮,求解决方法?
看了源码, 需要设置@current-change="currentPage = arguments[0]",这样内部外部的currentpage就同步了
重新写了一个分页组件,结合vuex使用,用起来和antd的table差不多。
: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; }
一个临时解决方案, 通过 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事件
加.sync修饰符看看
加了.sync修饰符没用,请问有谁解决了这个问题么?
@alvin-xu 不太明白你们的意思。写了例子:https://jsfiddle.net/zhiyang/qwsL3g1f/9/ ,不确定是否解决了你们的问题。
@ziyoung 谢谢您。 您这个例子跟我本地现象不太吻合。
我本地 :current-page.sync 绑定的是计算属性,页数存在了vuex中。vuex正确保存当前页数后,我关闭当前页,并重新打开,此时无论我的计算属性拿到的页数是多少,分页组件显示的页数永远是第一页。
总结,所以问题是:分页组件初始化时永远为第一页,:current-page.sync在初始化时无效。
我想直接在您的例子中复现这个问题,但确不行。我本地版本已经跟你用的一致。你的例子是可以正确初始化的。
不过,您的例子给了我灵感。 我发现虽然初始化当前页数无效,但是后续的方法改变页码数是可以的,组件响应正确。
于是,我在created函数中,加了一个延迟800ms函数,来再次初始化组件页码数。算是勉强解决了吧。。。
这绝对是一个Bug,也有可能是跟VueJs一起使用导致的。不清楚。
需求是从编辑页面返回列表页需记住分页,保存再store,返回时设置current-page.sync无效
这么久了,还没有人处理么?
触发条件:
1、total
初始化为 0
2、同步操作中改变 currentPage
的值
3、异步操作中改变 total
的值
4、分页组件拿到不合法的 currentPage
,将页数改为 1,之后即使 total
大于0,也没有重置 currentPage
主要是这段代码,从逻辑上来讲也没毛病,保证 当前页码 都是合法值,但是上面说的情况就比较尴尬,可以在分页组件上加上 v-if
,total
为 0 时不渲染,有了值之后再进行渲染。
you should set total
default value null
not 0,设置total的初始值为null而不是0 #1153
嗯,THX
Thx~
Thx~
好坑啊,total初始化为0时不渲染,修改了它的状态也不渲染。。。初始值置为null就可以了,这让人难以理解。
都发布到了2.11.1版本了还没有解决吗
搞好久 初始total = null 解决了我的问题 这个bug不修复也该出个提示
$refs 中 把他的internalCurrentPage和lastEmittedPage,都重置相同的值,要不然点击值和lastEmittedPage相同,current-change不会触发
<el-pagination v-if="total" style="margin-left: 59px;" :current-page.sync="currentPage" @current-change="pageChange" layout="prev, pager, next" :page-size="pageSize" :total="total"
yes, ok!
这个问题又出现了 怎么解决呢