基于Vue2.0+ElementUI实现表格翻页功能

一、Element UI简介

二、后端数据准备

三、前端分页器实现

```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分别是当每页显示的数据数量（pagesize）和当前页数（currentPage）发生变化时的响应函数。page-sizes是所有可选的每页显示数据数量。layout是分页器附带的功能，一般无需更改。total是总数据数，对于字典数组，直接使用length方法即可得到总数据数。

四、数据展示与响应函数

在el-table标签中，通过计算可以得到当前页应显示的数据。以下是相关代码：

```javascript

data () {

return {

data: [], // 数据

currentPage: 1, // 当前页

pagesize: 20, // 每页显示的数据数量

}

},

methods: {

handleSizeChange: function (size) {

this.pagesize = size;

},

handleCurrentChange: function(currentPage){

this.currentPage = currentPage;

}

}

```

五、列控制

注：以上内容仅作为示例，实际使用时请根据具体情况进行调整和优化。