下面我就为大家分享一篇利用vue和element-ui设置表格内容分页的实例，具有很好的参考价值，希望对大家有所帮助。
html代码
因为我写在template中，也就是新建了组建中，贴出代码。
<el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination>
代码中，small代表是否使用小型分页样式
layout代表组件布局，子组件名用逗号分隔
属性： total代表总条目数
事件： current-change用于监听页数改变，而内容也发生改变
其他属性可参见element官方api
http://element.eleme.io/#/zh-cn/component/pagination
监听方法,写在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; } }
其中url是在后台express搭建起来的脚手架所设置好的路由。
在data中注册使用的数据
因为我是全局注册，data是个返回对象的函数
data:function(){ return { total:0,//默认数据总数 pagesize:7,//每页的数据条数 currentpage:1,//默认开始页面 } }
将数据绑定到tbody上
<el-table :data="searchinfo.slice((currentpage-1)*pagesize,currentpage*pagesize)" style="width: 100%">
其中searchinfo是我获取到后台数据的数组。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
有关处理axios拦截设置和错误处理的方法？
通过vue.js使用axios实现下载功能（详细教程）
完美解决axios在ie下的兼容性问题，具体解决步骤如下
以上就是利用vue和element-ui如何实现表格内容分页的详细内容。