1、背景：自己封装了一个分页组件，组件支持的参数包括页码pageIndex,每页数据个数pageSize,数据总量total等

2、问题：接口请求数据过来页面渲染成功分页组件也成功，但是当我切换第二页的时候页面数据更新成功 ，是第二页数据，但是页面在显示成第二页之后瞬间又变回第一页，（即数据是第二页，底下页码是第一页）我在分页组件里找了好久都没有找到问题的原因，后来百度各种搜索，有人说这是elementui分页组件的bug，我不信邪，继续自己找问题：为什么有些页面没有这个问题，这个页面偏偏有呢？

上代码：

function queryList(){
    var params = {
        pageI:this.pageIndex,
        pageS:this.pageSize
    };
    this.tableData = [];
    this.total = 0;
    Ajax(url,params).then((res)->{
        var meta = res.data;
        this.tableData = meta.list;
        this.total = meta.total;
    })
}

看出问题了么？没有吧，逻辑没毛病，在分页组件切换页码之后调用queryList，参数传值也正确。

问题的关键在于total，是的再次切换页码的时候total不能设置为0，页码切换不涉及总数的变化，再次请求接口total不变数据不更新，组件不刷新是正确的。

然后代码改成：

function queryList(){
    var params = {
        pageI:this.pageIndex,
        pageS:this.pageSize
    };
    this.tableData = [];
    Ajax(url,params).then((res)->{
        var meta = res.data;
        this.tableData = meta.list;
        this.total = meta.total;
    })
}

这下切换页码数据更新都没有问题了。

vue的美和艺术就在这了吧！很好玩。。。。