element 分页切换时:current-page无效 页数不会跟着一起切换

这篇具有很好参考价值的文章主要介绍了element 分页切换时:current-page无效 页数不会跟着一起切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题回溯:使用el-pagination组件 选择切换当前分页 页数为2

element 分页切换时:current-page无效 页数不会跟着一起切换,element-ui,vue.js,elementui,javascript,current-page无效,element分页切换失效

问题结果:el-pagination组件 当前页切换失败 一直都是 1,接口传参分页数据是2,打印当前分页也是2

解决方案1:使用 current-page参数 .sync 修饰符

element 分页切换时:current-page无效 页数不会跟着一起切换,element-ui,vue.js,elementui,javascript,current-page无效,element分页切换失效

element 分页切换时:current-page无效 页数不会跟着一起切换,element-ui,vue.js,elementui,javascript,current-page无效,element分页切换失效

解决方案2:检查获取表格方法的时候 取消手动设置 total = 0

element 分页切换时:current-page无效 页数不会跟着一起切换,element-ui,vue.js,elementui,javascript,current-page无效,element分页切换失效
例子:文章来源地址https://www.toymoban.com/news/detail-859941.html

 <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
</el-table>

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
</el-pagination>

tableData:[]  
page:{
	current:1,
	size:10,
	total:0
}

//获取表格参数
getTable(){
this.tableData = []
this.page.total = 0  //这一步会重新赋值 total,导致current-page页数异常 一直都会是 1,使用.sync也无效
	
//接口调用
//接口调用成功 赋值
this.tableData = res.data || []
this.page.total = res.total || 0
}

到了这里,关于element 分页切换时:current-page无效 页数不会跟着一起切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-UI 分页器Bug,切换页码,页码改变但是页码高亮未变化

    Element-UI提供了分页器的两个方法,handleSizeChange和handleCurrentChange,然而在实际使用中,却发现再切换页面展示数量的时候,会出现一些BUG, 页面刷新了,高亮页码却还是上次选择的页面。可以用以下方法解决; 翻看element文档中发现有current-page,当前页数,支持 .sync 修饰符

    2024年02月16日
    浏览(36)
  • el-pagination 动态切换每页条数、页数切换

    目录 业务场景 官方链接 实现效果 使用框架 代码展示 template代码 script代码 变量定义 事件定义         handleSizeChange事件--实现每页条数改变表格动态变化         handleCurrentChange事件--切换页码         css代码 完整代码 总结 当表格中的数据量如果非常庞大的时候

    2024年02月14日
    浏览(37)
  • 【Django】列表数据Paginatior分页,动态返回页码,显示当前页、总页数、跳转页

    1、当返回数据较多,如设置每页展示10条,数据接近200条,返回页码范围1~20,前端每个页码都显示的话,就会出现页码超出当前页面,被遮挡的页码无法操作和显示不美观; 2、列表的所在页码,总分页数,跳转不在动态页面的页数 在使用paginator转化为Page对象后,获取到n

    2024年02月12日
    浏览(40)
  • 解决swiper在Element-ui的tabs标签页切换时,swiper不生效,以及v-if和v-show不生效,还有左右箭头切换按钮点击无效的情况。

    解决swiper在Element-ui的tabs标签页切换时,swiper不生效,以及v-if和v-show不生效,还有左右箭头切换按钮点击无效的情况。 官网给出的解决方案是,使用observer:swiper4的api地址: https://www.swiper.com.cn/api/observer/218.html. 在切换Element-ui的tabs标签的时候,切换到没有使用Swiper的页面时销

    2024年02月15日
    浏览(61)
  • 小程序使用swiper时报错, [Component] <swiper>: current 属性无效,请修改 current 值或者页面卡顿,疯狂轮播

    [渲染层错误] [Component] : current 属性无效,请修改 current 值(env: Windows,mp,1.06.2307250; lib: 2.24.0) 这个是页面使用轮播组件时,没有添加current属性,添加上就可以了,但是添加后,小程序在手机上锁屏(有时候要等几分钟)重新打开时,页面疯狂卡顿,轮播

    2024年02月02日
    浏览(50)
  • wordpress框架自定义添加page分页功能

    先来看效果图: 一、在主题目录下的functions.php文件里,添加如下分页函数:  我这个函数是按网站需求做了一些调整和修改,因为我首页只显示三个分类,直接用$wp_query-max_num_pages查总页码的话是不准的,所以你要根据自己的网站数据来调整这个函数的代码。 二、在公共的

    2024年02月16日
    浏览(41)
  • Mybatis-Plus学习4 Page分页

    ctrl + P = 查看可填的属性类型  alt + 回车 = 自动填充数据类型 1、使用Page分页需要先配置config类,加上拦截器 type-aliasys-package配置pojo对象别名对应的包 自定义的Mapper的page查询: 乐观锁 和 悲观锁 悲观锁: 悲观锁的思想是,在操作数据之前,先假设其他并发操作会对数据进行

    2024年02月12日
    浏览(46)
  • MyBatis-Plus Page 分页不生效

    一、问题现象 使用 MyBatis-Plus 进行分页查询时,传入了 pageNum 和 pageSize,但是查询结果没有按照预期的效果返回。 二、问题原因 没有对 Mybatis-Puls 进行初始化,需要添加相应的配置类。 三、解决方案 在项目工程中创建 config 目录,在其中新建配置类 MyBatisPlusConfig.java 。 注意

    2024年02月12日
    浏览(44)
  • uniapp运行时报错routeDone with a webviewId 1 that is not the current page

    在开发微信小程序时使用HBuilderX uniapp开发运行时新手可能会出现routeDone with a webviewId 1 that is not the current page这个报错,解决这个问题我们可以在微信小程序app.json文件中添加配置或者如果是uniapp对应的应该是pages.json文件。 添加这句重新编译一下应该问题就解决了 

    2024年02月11日
    浏览(43)
  • 微信小程序出现routeDone with a webviewld 42 that is not the current page这个bug解决

    微信开发者工具基础库版本过高,可能会出现如下官方Bug routeDone with a webviewld 42 that is not the current page是因为微信开发者工具基础库版本用了最新的2.30.3但官方一直未解决这个问题,只有使用2.25.4的基础库才能使用。 为便于开发者解决低版本基础库无法兼容小程序的新功能的

    2024年02月11日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包