Use vue and element-ui to set the table content paging instance, vueelement-ui

Use vue and element-ui to set the table content paging instance, vueelement-ui

Html code

Because I wrote it in the template, that is, I created a new group and pasted the code.

<el-pagination  small layout="prev, pager, next" :total="total"  @current-change="current_change"></el-pagination>

In the code, small indicates whether to use a small paging style.

Layout indicates the component layout. Child component names are separated by commas (,).

Attribute: total indicates the total number of items.

Event: current-change is used to listen for page changes, and the content also changes

For other attributes, see the official API of element.

Http://element.eleme.io/#/zh-CN/component/pagination

Listening method, written in methods

Methods: {created: function () {// load the class data var url = 'HTTP: // 127.0.0.1: 3000/clazz/findall '; // obtain data from the background var vm = this; $. getJSON (url, function (data) {vm. clazzInfo = data; vm. total = data. length; // set the total number of Data !!! });}, Current_change: function (currentPage) {this. currentPage = currentPage ;}}

The url is the route set for the scaffold built in the backend express.

Data used for registration in data

Because I registered globally, data is a function that returns objects.

Data: function () {return {total: 0, // default total data pagesize: 7, // number of data entries per page currentPage: 1, // default start page }}

Bind data to tbody

<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">

SearchInfo is an array of background data that I have obtained.

The above example of using vue and element-ui to set the pagination of table content is all the content shared by Alibaba Cloud. I hope you can provide a reference and support for the customer's home.