Vue2.0+ElementUI实现表格翻页的实例


Posted in Javascript onOctober 23, 2017

ElementUI的表格要求的数据类型为字典数组。我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可。取出后我将其存入redis数据库方便之后取用。取用时使用eval()函数再传到前端即可。

前端放置Pagination 分页器,我这里直接采用了完整功能的分页器。

<el-pagination
 @size-change="handleSizeChange" 
 @current-change="handleCurrentChange" 
 :current-page="currentPage" 
 :page-sizes="[10, 20, 50, 100]" 
 :page-size="pagesize" 
 layout="total, sizes, prev, pager, next, jumper" 
 :total="data.length"> 
</el-pagination>

其中:handleSizeChange为pagesize发生改变时的相应函数,handleCurrentChange为currentPage发生改变时的相应函数。

page-sizes为所有可选择的page-size。可以自己更改其中的数字。

layout为附带的功能,一般不用动它。

total为总数据数。由于是字典数组,直接使用length方法即可得到总数据数。

data () { 
 return { 
 data: [], 
 currentPage:1, 
 pagesize:20, 
 
 } 
},

初始页currentPage、初始每页数据数pagesize和数据data

methods: { 
 handleSizeChange: function (size) { 
 this.pagesize = size; 
 }, 
 handleCurrentChange: function(currentPage){ 
 this.currentPage = currentPage; 
 } 
}

上面的两个响应函数,很好理解。

<el-table
 :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
 stripe 
 style="width: 100%">

el-table标签。通过计算很容易得到,要使当页显示分页后的对应数据,其下标应为(当前页-1)*每页数据数 到 当前页*每页数据数。使用slice方法进行取用。

stripe为带斑马纹表格。

<el-table-column
 prop="id" 
 label="序号" 
 align="center"> 
</el-table-column>

column标签。可放多个,对每列的控制。label为该列名称,显示在第一行。prop为data中的某key的名称。

Vue2.0+ElementUI实现表格翻页的实例

最后成果。

以上这篇Vue2.0+ElementUI实现表格翻页的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
用原生js做单页应用
Jan 17 Javascript
JS验证不重复验证码
Feb 10 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 #Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 #Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 #Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 #Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 #Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 #Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
mysql 字段类型说明
2007/04/27 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php绘制圆形的方法
2015/01/24 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
繁简字转换功能
2006/07/19 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python实现一次创建多级目录的方法
2015/05/15 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python对html过滤处理的方法
2018/10/21 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python openpyxl使用方法详解
2019/07/18 Python
Python的Lambda函数用法详解
2019/09/03 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python复合条件下的字典排序
2020/12/18 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
五一家具促销方案
2014/01/10 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
数据库连接池
2021/04/06 MySQL
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript