Vue+Element-UI总结_el-pagination实现Vue前端分页功能

一、前言

      当table的数据量比较大的时候。一个屏幕展示不出全部的数据，这个时候就需要分页查询来做了，因为我做的这个项目数据量比较小，所以就使用做了Vue前端分页。

二、开始上代码

2.1了解怎么使用

官网关于分页的介绍：https://element.eleme.cn/2.12/#/zh-CN/component/pagination

下面的就是官网的一个全部功能的例子,我做了一些整理：

展示的效果是这样的

在这里使用的属性及event的介绍

layout属性：是个字符串类型的值，他表示都展示那些组件，以及这些组件展示的顺序，每个组件用逗号分隔，这里使用的值有total, sizes, prev, pager, next, jumper，那么这些值分别都对应什么含义呢？我用下面这个图来解释。

    写的顺序不同，会让这几个组件的排列顺序不同。

current-page属性：代表的是当前页码，支持 .sync 修饰符，是number类型的值，默认是1。

page-sizes属性：代表的是每页显示多少条数据的选项，是一个number的数组，例如[5，10，15，20]，这个属性要配合着page-size属性一起用。

page-size属性：代表的是每页显示多少条数据，支持 .sync 修饰符，是一个number类型的值，默认是10。

total属性：代表的是总条数，是number类型的值。

size-change事件：每页展示数量发生变化时触发，回调参数每页数据的条数。

current-change事件：当前页码发生变化时触发，回调参数当前页码。

2.2分页的实际应用

代码部分如下：

注：在el-table标签中的data属性绑定的值要经过分页计算0.0

对您有帮助就点个赞呗！！