【VUE项目实战】24、分页效果实现

接上篇《23、改造状态列的显示效果》
上一篇我们实现了状态列的显示效果以及插槽形式定义操作列的渲染，本篇我们来实现用户列表的分页效果。我们要在用户数据列表的左下方加入一个分页组件：

Element-UI为我们提供了“Pagination分页”组件，我们选择功能最全的分页组件：

样例代码如下：

这里“@size-change”指定的是切换“每页显示xx条”的时候触发的方法；“@current-change”即只要页码值发生了变化，就会触发该属性的方法；“current-page”显示当前的页数；“page-sizes”是“每页显示xx条”的选择框；“page-size”是当前选中的每页多少条；“layout”指我们需要的翻页组件（total是数据总量, sizes是页数, prev向前翻页, pager显示页数, next向后翻页, jumper直接跳转组件）；“total”是总页数。

我们复制该组件进行修改，代码如下：

注：要在element.js注册“Pagination”组件，否则会不显示。
我们分别在方法区指定了两个监听方法，并重新带着分页数据发送了请求。我们看看效果：

至此，我们的分页效果全部实现。
下一篇我们继续实现用户状态动态修改的功能。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/u013517797/article/details/121874353