HTML:

<Table border stripe ref="selection" :columns="columns" :data="nowData"></Table>
<Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="_nowPageSize"
show-total show-sizer show-elevator/>
表格:
columns:表头数据
data:数据
分页:
total:分页显示多少条数据
page-size:每页显示多少条数据
on-change:改变页码回调,返回值:当前页码
on-page-size-change:切换每页条数时回调,返回值:每页的数据条数
JS:
  data(){
return{
columns:['表头'],
data:['数据'],
//分页
pageSize: 10,//每页显示多少条
dataCount: 0,//总条数
pageCurrent: 1,//当前页
}
}
methods:
//所有数据 
   _getData() {
//所有数据
this.data = [];
for (let i = 0; i < 100; i++) {
let a = {
id: i,
idName: 'Mr.Li' + i,
name: '小李',
organization: '国务院',
people: '老李',
state: '活跃',
};
this.data.push(a);
}
//分页显示所有数据总数
this.dataCount = this.data.length;
//循环展示页面刚加载时需要的数据条数
this.nowData = [];
for (let i = 0; i < this.pageSize; i++) {
this.nowData.push(this.data[i]);
}
},

//点击,切换页面
changepage(index) {
//需要显示开始数据的index,(因为数据是从0开始的,页码是从1开始的,需要-1)
let _start = (index - 1) * this.pageSize;
//需要显示结束数据的index
let _end = index * this.pageSize;
//截取需要显示的数据
this.nowData = this.data.slice(_start, _end);
//储存当前页
this.pageCurrent = index;
},
//每页显示的数据条数
_nowPageSize(index) {
//实时获取当前需要显示的条数
this.pageSize = index;
},
 

iView 的分页结合表格用法的更多相关文章

  1. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  2. Flutter 分页功能表格控件

    老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来. PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTabl ...

  3. EasyUi 分页 和 表格数据加载

    这里说明的是将说有数据先返回到前端再由前端去分页,性能可能没有先在后台分好页再返回给前端高 但如果操作不涉及大数据的话也没什么大问题,具体问题具体分析 要使用分页控件首先要声明初始化一下: //设置分 ...

  4. php部分---一个分页类、用法

    1.分页类 <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 privat ...

  5. Mysql 分页语句Limit用法

    转载自:http://qimo601.iteye.com/blog/1634748 1.Mysql的limit用法 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用 ...

  6. Mysql分页之limit用法与limit优化

    Mysql limit分页语句用法 与Oracle和MS SqlServer相比,mysql的分页方法简单的让人想哭. --语法: SELECT * FROM table LIMIT [offset, ...

  7. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

  8. 【转】AspNetPager分页控件用法

    AspNetPager分页控件解决了分页中的很多问题,直接采用该控件进行分页处理,会将繁琐的分页工作变得简单化,下面是我如何使用AspNetPager控件进行分页处理的详细代码: 1.首先到www.w ...

  9. Java EE 锚、表格用法

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

随机推荐

  1. day 7-19 Mysql索引原理与查询优化

    一,介绍 1.什么是索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语 ...

  2. javap -v没有显示LocalVaribleTable

    时隔多日,终于找到为什么javap -v .class文件没有LocalVariableTable出现 因为默认的javac编译没有生成相关的调试信息,这里我们可以通过javac -help查看指令帮 ...

  3. 神经网络-SGD-2

    接上节: 3.梯度(gradient): def numerical_gradient(f,x): h=1e-5 grad=np.zeros_like(x) for index_x in range( ...

  4. python之路--BOM和DOM

    一. 介绍 之前学的JS的一些简单的语法并没有和浏览器有任何的交互. 我们要想制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知识. JavaScript 分为 ECMAScr ...

  5. Python cmd库的简易使用

    简单记录一下,竟然这么简单的方法就能在 python 里面实现一个简单的交互式命令行以前从来没有尝试过. 上一个完整的例子: import cmd import osimport readline r ...

  6. python学习笔记(11)--测验3: Python基础语法(下) (第7周)

    斐波那契数列计算 B 描述 斐波那契数列如下: F(0) = 0, F(1) = 1 F(n) = F(n-1) + F(n-2) 编写一个计算斐波那契数列的函数,采用递归方式,输出不超过n的所有斐波 ...

  7. /proc/diskstats

    读取磁盘统计信息,如下所示: linux-HpdBKE:~ # cat /proc/diskstats sda sda1 sda2 dm- dm- dm- sda为整个硬盘的统计信息,sda1为第一个 ...

  8. linux中一些特殊的中文文件不能删除问题

    例: [root@iZ2zecl4i8oy1rvs00dqzeZ tmp]# ,),(,,' [root@iZ2zecl4i8oy1rvs00dqzeZ tmp]# echo "rm -rf ...

  9. 思维导图,UML图,程序流程图制作从入门到精通

    工具: https://www.processon.com/ 第一 用例图 第二 时序图 第三 流程图

  10. tensorflow点滴笔记

    1.模型保存 模型保存需要使用函数 tf.train.Saver(), a)创建saver时,可以指定需要存储的tensor,如果没有指定,则全部保存. b) 创建saver时,可以指定保存的模型个数 ...