基于Vue2.0+ElementUI实现表格翻页功能


Posted in Javascript onOctober 23, 2017

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本。在这个月的 NingJS 上我们开源了这个项目,当时它的文档还没有准备好。今天,经过两周多的完善, Element UI 的文档正式上线啦!目前它处于 rc 阶段,正式版将于 Vue 2.0 发布后第一时间跟进。 欢迎大家来使用和完善,一起把它做成 Vue 最好的企业级组件库。

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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
微信小程序基础教程之echart的使用
Jun 01 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 #Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 #Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 #Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 #Javascript
JS返回顶部实例代码
Aug 09 #Javascript
VUE2实现事件驱动弹窗示例
Oct 21 #Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 #Javascript
You might like
PHP file_exists问题杂谈
2012/05/07 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
Ajax基础知识详解
2017/02/17 Javascript
详解angular element()方法使用
2017/04/08 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
python实现简单的TCP代理服务器
2014/10/08 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
高中生班主任评语
2014/04/25 职场文书
机关保密承诺书
2014/06/03 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
幼儿教师个人总结
2015/02/05 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书