Element的Pagination分页sync问题小结
更新时间：2022年07月28日 10:53:08 作者：爱学习的大鱼
本文主要介绍了Element的Pagination分页sync问题小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
今天用到Element-UI的Pagination分页组件时选择页面大小时和点击分页时，无法动态刷新页面数据,数据如下：
<div class="pagination">
<el-pagination
background
:page-size="pageSize"
:current-page="currentPage"
:page-sizes='[5, 10, 20, 40]'
:total="tableData.length"
layout="total,sizes,prev,pager,next,jumper"
></el-pagination>
</div>错误如下：
按官方所说，加.sync，优化如下:
<div class="pagination">
<el-pagination
background
:page-size.sync="pageSize"
:current-page.sync="currentPage"
:page-sizes='[5, 10, 20, 40]'
:total="tableData.length"
layout="total,sizes,prev,pager,next,jumper"
></el-pagination>
</div>还是存在问题,当前页面能改变，但页面大小不变，如下所示:
问题解析 ===> Element-ui el-pagination封装之sync多层的问题
最终优化方案：
<div class="pagination">
<el-pagination
background
:page-size="pageSize"
:current-page="currentPage"
:page-sizes='[5, 10, 20, 40]'
:total="tableData.length"
layout="total,sizes,prev,pager,next,jumper"
@size-change="handlePageSizeChange"
@current-change="handlePageChange"
></el-pagination>
</div>methods: {
handlePageChange(val) {
this.currentPage = val
},
handlePageSizeChange(val) {
this.pageSize =val
}
}优化结果:
到此这篇关于Element的Pagination分页sync问题小结的文章就介绍到这了,更多相关Element Pagination分页sync内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue.js最佳实践,本文主要面向对象是有一定vue.js 编辑经验的开发者，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue-treeselect显示unknown的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
第一次接触神奇的vue.js，主要了解一下v-model、v-if、v-else、v-show、v-for等，感兴趣的小伙伴们可以一起学习一下2016-12-12
proxy代理不生效以及vue config.js不生效解决方法
在开发Vue项目过程中,使用了Proxy代理进行数据劫持,但是在实际运行过程中发现代理并没有生效,也就是说数据并没有被劫持,这篇文章主要给大家介绍了关于proxy代理不生效以及vue config.js不生效解决方法的相关资料,需要的朋友可以参考下2023-11-11
今天小编就为大家分享一篇解决Vue+Element ui开发中碰到的IE问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇vue新vue-cli3环境配置和模拟json数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vue3是如何实现加载动态菜单功能的，文中的示例代码讲解详细，对我们学习Vue有一定帮助，需要的可以参考一下2022-07-07
vue的人都知道,vue3里面使用了proxy替换了defineProperty,本文主要介绍了Vue3用Proxy替代defineProperty的原因,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要为大家详细介绍了vue实现简单图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了Vue常用的修饰符及应用场景解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论