前端学习——vue + elementui实现分页查询

分页查询功能，是很常见的一个功能，下面是记录使用vue + elementui实现的分页查询功能。

elementui使用pagination提供了多种分页功能，可以根据自己的需求选择不同的分页样式，但其最重要的参数有三个，current-page——当前页码, page-size——页大小, total——总条数；

还有两个事件函数，size-change——改变页大小时触发，参数是每页条数；current-page——翻页函数，当点击下一页触发翻页时调用。

elementui 提供了多个翻页属性和事件，如下图所示：

分页事件

要在页面中使用分页功能需要添加以下代码

效果图：

翻页实现代码，定义四个参数，列表书籍，页码，页大小，总条数，然后点击翻页和切换页大小时，调用查询接口，并把响应的页码，总条数和页大小赋值给定义的参数。