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中的数据变化,不加这个则列表分页效果不会实现。