美文网首页
element的分页组件无法实时更新

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

作者: 心大的少年 | 来源:发表于2019-07-16 16:01 被阅读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>
    

    相关文章

      网友评论

          本文标题:element的分页组件无法实时更新

          本文链接:https://www.haomeiwen.com/subject/zwzqlctx.html