利用vue和element-ui设置表格内容分页的实例

让我们来看一下HTML代码部分。在template中，我们使用了el-pagination组件来进行分页的设置。

```html

small

layout="prev, pager, next"

:total="total"

@current-change="current_change">

```

在这个代码中：

small属性代表是否使用小型分页样式。

layout属性定义了组件的布局，其中的子组件名以逗号分隔。

total属性代表了总条目数。

current-change事件用于监听页数的改变。

接下来，我们在methods中定义了相关的方法。在created方法中，我们加载后台数据并设置数据总数。在current_change方法中，我们更新当前页码。

```javascript

methods: {

created: function() {

var url = '

var vm = this;

$.getJSON(url, function(data) {

vm.clazzInfo = data;

vm.total = data.length; // 设置数据总数目！

});

},

current_change: function(currentPage) {

this.currentPage = currentPage;

}

}

```

在data中，我们注册了使用的数据，包括总数据数、每页的数据条数和默认开始页面。