Vue2.0+ElementUI实现表格翻页的实例

在前端，我们使用了Pagination分页器，这里采用了功能齐全的版本。具体的HTML代码实现如下：

```html

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="currentPage"

:page-sizes="[10, 20, 50, 100]"

:page-size="pagesize"

layout="total, sizes, prev, pager, next, jumper"

:total="data.length">

```

其中，handleSizeChange和handleCurrentChange分别是当每页显示的数据数量或当前页数发生变化时的响应函数。page-sizes是所有可选的每页显示数据数量的设置，你可以根据需要更改其中的数值。layout是分页器附带的功能显示设置，一般无需更改。total是总数据数，由于数据是字典数组格式，直接使用length方法即可得到总数据数。

在Vue的数据对象中，我们定义了data、currentPage和pagesize等初始值。其中data是存放数据的数组，currentPage是初始页，pagesize是初始每页显示的数据数量。

响应函数handleSizeChange和handleCurrentChange的实现如下：

```javascript

methods: {

handleSizeChange: function (size) {

this.pagesize = size;

},

handleCurrentChange: function(currentPage){

this.currentPage = currentPage;

}

}

```

这两个响应函数非常简单直观，分别用于处理每页显示数据数量的变化和当前页数的变化。

我们定义了el-table-column标签，用于控制每一列的具体内容。label属性用于设置列名，显示在第一行；prop属性用于绑定data中的某个key的值。