Home >Web Front-end >JS Tutorial >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!