基于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 相关文章推荐
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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可变变量学习小结
2015/11/29 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php7 新增功能实例总结
2020/05/25 PHP
JS模拟多线程
2007/02/07 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python实现的简单抽奖系统实例
2015/05/22 Python
python生成并处理uuid的实现方式
2020/03/03 Python
python学生管理系统的实现
2020/04/05 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
学习Python爬虫的几点建议
2020/08/05 Python
学生打架检讨书1000字
2014/01/16 职场文书
小学中秋节活动方案
2014/02/06 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
营业用房租赁协议书
2014/11/26 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL