element的分页组件无法实时更新

element-ui的分页组件的当前页没有实时更新的问题

做项目的时候有个确认收款按钮,点击后会跳到第一页,但是真实效果是数据确实是第一页的,但是组件显示的当前页码还是在之前的页码上

pagination: {
 'current-page': 1,
 'page-size': 5,
  total: 100
}
// 修改数据的地方
this.$set(this.pagination, 'current-page', 1);

这样写了之后发现,分页组件里面的监听除了初始的时候,无论怎么点分页都没起到效果

//element的分页组件被重新封装了
data() {
  return {
    oOptions: this._options
  }
},
watch: {
  _options: {
    handler: function() {
      conle.log(this._options);
    },
    deep: true
  }
}

后来重新看了一下element的分页组件的参数,注意到current-page的说明,支持.sync修饰符,然后给分页组件的current-page添加上.sync修饰符就好了,具体原因不清楚

//这里是分页组件的代码
<el-pagination
        prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync ="_options['current-page']"
        :page-size="_options['page-size']"
        :layout="sLayout"
        :total="_options.total">
      </el-pagination>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 方法一:使用pure_pagination进行分页 1. pure_pagination介绍 pure_pagin...
    Jlan阅读 4,770评论 0 7
  • 前言 分页其实很容易实现,我自己写了一个简单的分页组件,可以实现上下翻页,输入页码跳转到指定页,刷新页面后不会回到...
    大柚子08阅读 6,934评论 0 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,681评论 1 92
  • 众所周知,目前中国的web前端领域使用者最多,口碑最好的框架当属Vue,本胖相信到2018年,vue将全面统治we...
    我叫吕胖胖阅读 5,411评论 0 12
  • 上个月挑了个晴朗的日子,在家制皂,现在皂体也基本成熟,看着令人欢喜。 其实关于制皂,不知道从何说起,好像是微博圈里...
    葵圃阅读 3,984评论 2 7