<div id="app">
  <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
    <el-table-column v-for="item in tableHeader" :prop="item.key" :label="item.name" show-overflow-tooltip=true>
    </el-table-column>
  </el-table>
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"     layout="total, prev, pager, next,jumper" :total="tableData.length">
  </el-pagination>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    tableHeader: [{
        name: '日期',
        key: 'date'
      },
      {
        name: '姓名',
        key: 'name'
      },
      {
        name: '地址',
        key: 'address'
      }],
    tableData: [{
      date: '2016-05-04',
      name: '王小虎2',
      address: '上海市普陀区金沙江路 1517 弄'
    },{
      date: '2016-05-03',
      name: '王小虎15',
      address: '上海市普陀区金沙江路 1516 弄'
    }],
    pageSize: 5,
    currentPage: 1,
    },
    methods: {
      handleSizeChange: function() {},
      handleCurrentChange: function() {}
    }
})
</script>

element-ui表格控件前端分页方法的更多相关文章

  1. [ PyQt入门教程 ] PyQt5中数据表格控件QTableWidget使用方法

    如果你想让你开发的PyQt5工具展示的数据显得整齐.美观.好看,显得符合你的气质,可以考虑使用QTableWidget控件.之前一直使用的是textBrowser文本框控件,数据展示还是不太美观.其中 ...

  2. element ui 时间控件 多个日期

    前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下.转载请注明出处:https://www.cnblogs.com/yu ...

  3. element ui 日期控件范围时间限制记录、以及计算两个日期之间的天数

    日期的筛选经常会有最小的日期选择,例如:当前日期 :clearable="false" :picker-options="pickerOptions0" val ...

  4. Angular 2的表格控件

    Angular 2的表格控件 前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular ...

  5. 自己实现的数据表格控件(dataTable),支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义

    一.前言 也没什么好说的嘛,用了蛮多github上开源的能够实现dataTable功能的表格插件,不过都默认绑定样式啊,数据格式也设定的比较死,所以忍不住自己实现了一个简单的可自定义样式和自定义数据返 ...

  6. 葡萄城首席架构师:前端开发与Web表格控件技术解读

    讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始 ...

  7. 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场

    提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...

  8. SpreadJS 纯前端表格控件 V12.2 发布更新

    用不到100行代码,在前端实现Excel的全部功能 千万前端开发者翘首企盼,SpreadJS V12.2 终发布更新:六大功能特性,带来更多便利,用不到100行代码,在前端实现Excel的全部功能! ...

  9. 【新功能前瞻】SpreadJS 纯前端表格控件V12.2:打印增强、拖拽填充等六大特性

    新版本来袭:葡萄城 SpreadJS 纯前端表格控件的全新版本 V12.2 将于8月正式发布! 作为一款备受华为.招商银行.中国平安.苏宁易购等行业专家和前端开发者认可的纯 JavaScript 电子 ...

随机推荐

  1. df -h 挂死

    df -h 卡死的情况,那是因为无法统计挂载的目录的大小 一般是因为还挂载了一些外部的目录,如nfs的目录 可以用mount | column -t 命令查看哪些目录 然后umount这些目录, 一般 ...

  2. code vs 1216 跳马问题

    1216 跳马问题  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 题目 输入描述 Input Descri ...

  3. 零基础学python-6.2 共享引用

    这一章节说说共享引用 我们先举一个样例 a=1 b=a 上面的样例就是共享引用,这里我们说说整个过程: 1.创建一个对象1 2.创建一个变量a 3.把a和1所在的内存空间连接起来.就是a引用1 4.a ...

  4. XCL-Chart柱形图的期望线/分界线

    周日在柱形图上加了两个小功能,当中之中的一个是加上了期望线/分界线,功能非常小,但我个人非常喜欢这个功能(好像之前也没看到别的图表库原生支持这个. ) 主要是加上这些小小的横线后,能非常明显的区分出数 ...

  5. 35.angularJS的ng-repeat指令

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...

  6. AvtiveMQ 参考

    推荐学习:https://www.cnblogs.com/zhuxiaojie/p/5564187.html#autoid-2-1-0

  7. windows如何批量添加路由表

    我大约有2000条路由,需要批量导入,如何才能快速导入,快速删除呢.如果直接用命令添加路由表的话感觉很慢. windows如何批量添加路由表 >> csharp这个答案描述的挺清楚的:ht ...

  8. PDO 拿出來的 Float 數據跟数据库中的数据不匹配

    数据库中的价格字段是 float 类型的,在 Laravel 中取出会出现这样的情况 数据库:71.9 -> 程序打印:72.0 数据库:75.2 -> 程序打印:75.3 在另外一个测试 ...

  9. 【转载】AngularJS 用$sce服务来过滤HTML标签,解决无法正确显示后台传递的html标签

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  10. 《剑指offer》跳台阶

    一.题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 二.输入描述 输入n级台阶 三.输出描述 输出总有多少种不同跳法 四.牛客网提供的框架 cla ...