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项目中使用require.context引入组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue 实例方法和数据的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-10-10
Vue Router是Vue.js官方的路由管理器,用于构建SPA（单页应用程序）,本文将深入探讨Vue Router的动态路由功能,希望可以帮助大家更好地理解和应用Vue.js框架2024-02-02
本篇文章主要介绍了Vue.js -- 过滤器使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。2017-03-03
这篇文章主要介绍了 基于vue2.0+vuex的日期选择组件功能实现，详细介绍了使用vue编写的日期组件,，非常具有实用价值，需要的朋友可以参考下。2017-03-03
vue修改proxyTable解决跨域请求,报404的问题及解决
这篇文章主要介绍了vue修改proxyTable解决跨域请求,报404的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家详细介绍了vue3限制table表格选项个数的解决方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue.js element-plus使用图标不显示问题的解决方式
近期在学习Vue时用elementUI时发现图标在页面上显示不出来,所以这篇文章主要给大家介绍了关于Vue.js element-plus使用图标不显示问题的解决方式,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了vue轻松实现水印效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论