用户列表实现分页效果

Element UI官方网站提供了一种实现数据分页效果的代码，实现当数据量过多时，使用分页分解数据。基本的代码直接复制过去即可。

这里我选择的是功能最全的一项：

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

按需导入后，来看一下上面代码的功能，做下梳理。@size-change=“handleSizeChange” 是一个事件绑定函数，当点击切换每页显示多少条的那个下拉菜单，会触发handleSizeChange，即监听pageSize改变的事件。 :page-sizes="[100, 200, 300, 400]"的作用是供pageSize的切换，也就是下图的效果，可以根据你数据的总数给予特定的值。
"

@current-change="handleCurrentChange"表示只要页码发生切换，就会触发第二个绑定的事件，即监听页码值改变的数据。

:current-page="currentPage4"展示的是当前页码，这里我将current-page的值绑定为queryInfo.pagenum
:page-size="100"表示当前展示多少条数据，
:page-size="queryInfo.pagesize，这里将他动态绑定到了queryInfo.pagesize（我自己保存数据的变量）

layout="total, sizes, prev, pager, next, jumper"表示当前页码条展示什么内容。

最后由于我保存的变量(queryInfo)是需要保存监听的数据，是时刻经过后都在改变的。我们需要根据最新的newsize和newpage来改变queryInfo的pagenum和pagesize，如下：

这里每个监听函数中都使用了this.getUserList()来调用并更新ajax获取页面初始化所需的数据，这个函数在created过程已经拉取到数据，一旦触发改变，就会引起queryInfo中的数据变化，不加这个则列表分页效果不会实现。