<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. hadoop-14-进行libtirpc的rpm包安装

    hadoop-14-进行libtirpc的rpm包安装 安装过程中出现了这个问题,进行安装: yum localinstall --nogpgcheck libtirpc-0.2.1-13.el6.x ...

  2. 【HDU 5145】 NPY and girls(组合+莫队)

    pid=5145">[HDU 5145] NPY and girls(组合+莫队) NPY and girls Time Limit: 8000/4000 MS (Java/Other ...

  3. 在独立的文件里定义WPF资源

    一.文章概述 本演示介绍怎样在单独的文件里定义WPF资源.并在须要的地方调用相关资源文件. 相关下载(代码.屏幕录像):http://pan.baidu.com/s/1sjO7StB 在线播放:htt ...

  4. HDU 4288-Coder(模拟)

    Coder Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  5. CF 558D(Guess Your Way Out! II-set解决区间问题)

    D. Guess Your Way Out! II time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  6. Pascal Script

    MsgBox http://www.jrsoftware.org/ishelp/index.php?topic=isxfunc_msgbox ExpandConstant http://www.jrs ...

  7. 日期格式,Popup的使用方法,RenderTransform与LayoutTransform的区别

    1.画个笑脸给大家娱乐一下: <Canvas Width="200" Height="180" VerticalAlignment="Cente ...

  8. jsp输出九九乘法表

    <% String st = ""; for(int i = 1; i <= 9; i++){ for(int j = 1; j <= i; j++){ st + ...

  9. Java类和对象11

    首先,编写一个类ChongZai,该类中有3个重载的方法void print():其次,再编写一个主类来测试ChongZai类的功能. public class ChongZai { public v ...

  10. JavaScript设计模式(biaoyansu)

    1.构造器模式——创建类模式   ES6:class Student{ constructor(score,quality){ this.score = score this.quality = qu ...