How to implement paging of table content using vue and element-ui

Below I will share with you an example of using vue and element-ui to set up table content pagination. It has a good reference value and I hope it will be helpful to everyone.

html code

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

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

In the code, small represents whether to use the small paging style

layout represents the component layout, and the sub-component names are separated by commas

Attributes: total represents the total number of entries

Event: current-change is used to monitor page number changes, and the content also changes

For other attributes, please refer to element official API

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

The monitoring method is written in methods

methods:{
 created:function(){
  //加载班级的数据
   var url ='http://127.0.0.1:3000/clazz/findAll';
   //向后台获取数据
   var vm = this;
   $.getJSON(url,function(data){
    vm.clazzInfo = data;
    vm.total = data.length;//设置数据总数目！！！
   }); 
  },
 current_change:function(currentPage){
    this.currentPage = currentPage;
  }
}

The url is the scaffolding built by express in the background The configured route.

Register the data used in data

Because I registered globally, data is a function that returns an object

data:function(){
   return {
    total:0,//默认数据总数
    pagesize:7,//每页的数据条数
    currentPage:1,//默认开始页面
   }
  }

Bind data to tbody

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

where searchInfo is the array I obtained the background data from.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to deal with axios interception settings and error handling?

Use axios to implement the download function through vue.js (detailed tutorial)

Perfectly solve the compatibility problem of axios under IE, specific solution Proceed as follows

The above is the detailed content of How to implement paging of table content using vue and element-ui. For more information, please follow other related articles on the PHP Chinese website!