利用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 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
Script的加载方法小结
Jan 12 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 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获取表单中多个同名input元素的值
2014/03/20 PHP
php pdo操作数据库示例
2017/03/10 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
javascript引导程序
2008/10/26 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
python列表list保留顺序去重的实例
2018/12/14 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
python小程序实现刷票功能详解
2019/07/17 Python
解决Django连接db遇到的问题
2019/08/29 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
python range实例用法分享
2020/02/06 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
教师实习的自我鉴定
2013/10/26 职场文书
大学生如何写自荐信
2014/01/08 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
档案保密承诺书
2014/06/03 职场文书
2015新学期家长寄语
2015/02/26 职场文书
预备党员群众意见
2015/06/01 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang