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

2019-07-16  本文已影响0人  心大的少年

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>
上一篇下一篇

猜你喜欢

热点阅读