利用vue和element-ui设置表格内容分页的实例


Posted in Javascript onMarch 02, 2018

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设置表格内容分页的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
关于JS中prototype的理解
Sep 07 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
详解iframe与frame的区别
Jan 13 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 #Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 #Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 #Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 #Javascript
vue中添加mp3音频文件的方法
Mar 02 #Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 #Javascript
select标签设置默认选中的选项方法
Mar 02 #Javascript
You might like
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python单元测试实例详解
2018/05/25 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python实现TCP文件传输
2020/03/20 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
Python中有几个关键字
2020/06/04 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
3分钟英语演讲稿
2014/04/29 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
争做文明公民倡议书
2014/08/29 职场文书
2014年团工作总结
2014/11/27 职场文书
教师节座谈会主持词
2015/07/03 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript