利用vue和element-ui设置表格内容分页的实例
2018-03-02 10:03
2361 查看
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是我获取到后台数据的数组。
以上这篇利用vue和element-ui设置表格内容分页的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 利用vue和element-ui设置表格内容分页
- vue中element-ui表格缩略图悬浮放大功能的实例代码
- vue+element-ui+ajax实现一个表格的实例
- 利用vue + element实现表格分页和前端搜索的方法
- vue+element-ui+ajax的一个表格实例
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- Vue2.0+ElementUI+PageHelper实现的表格分页
- Vue+element-ui 实现表格的分页功能示例
- vue+Element-ui实现分页效果
- Element-ui table中过滤条件变更表格内容的方法
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- vue.js+element-ui动态配置菜单的实例
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- vue elementui table默认显示子表格
- 使用vue和datatables进行表格的服务器端分页实例代码
- 利用vue+vue-router+elementUI实现简易通讯录
- vue中使用element-ui进行表单验证的实例代码
- 搭建element-ui的Vue前端工程操作实例
- Vue+ElementUI+SpringMVC实现分页