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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
js如何获取网页所有图片
May 12 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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魔术引号所带来的安全问题分析
2014/07/15 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JavaScript Split()方法
2015/12/18 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python实现学生信息管理系统
2020/04/05 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
类的返射机制中的包及核心类
2016/09/12 面试题
户籍证明的格式
2014/01/13 职场文书
追悼会主持词
2014/03/20 职场文书
母亲节演讲稿
2014/05/27 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
狮子林导游词
2015/02/03 职场文书
手机销售员岗位职责
2015/04/11 职场文书
小学生暑假生活总结
2015/07/13 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL