iView 的分页结合表格用法
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 的分页结合表格用法的更多相关文章
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- Flutter 分页功能表格控件
老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来. PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTabl ...
- EasyUi 分页 和 表格数据加载
这里说明的是将说有数据先返回到前端再由前端去分页,性能可能没有先在后台分好页再返回给前端高 但如果操作不涉及大数据的话也没什么大问题,具体问题具体分析 要使用分页控件首先要声明初始化一下: //设置分 ...
- php部分---一个分页类、用法
1.分页类 <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 privat ...
- Mysql 分页语句Limit用法
转载自:http://qimo601.iteye.com/blog/1634748 1.Mysql的limit用法 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用 ...
- Mysql分页之limit用法与limit优化
Mysql limit分页语句用法 与Oracle和MS SqlServer相比,mysql的分页方法简单的让人想哭. --语法: SELECT * FROM table LIMIT [offset, ...
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
- 【转】AspNetPager分页控件用法
AspNetPager分页控件解决了分页中的很多问题,直接采用该控件进行分页处理,会将繁琐的分页工作变得简单化,下面是我如何使用AspNetPager控件进行分页处理的详细代码: 1.首先到www.w ...
- Java EE 锚、表格用法
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- Day 3-6 生成器&迭代器
---恢复内容开始--- 列表生成式: list = [i*i for i in range(20)] # 这就是一个列表生成式 print(list) # [0, 1, 4, 9, 16, 25, ...
- CDH 6.0.1 集群搭建 「After install」
集群搭建完成之后其实还有很多配置工作要做,这里我列举一些我去做的一些. 首先是去把 zk 的角色重新分配一下,不知道是不是我在配置的时候遗漏了什么在启动之后就有报警说目前只能检查到一个节点.去将 zk ...
- python数学第三天【方向导数】
1.方向导数 2. 梯度 3. 凸函数: 4. 凸函数的判定 5. 凸函数的一般表示 6. 凸性质的应用
- Google css & Google fonts
最近用某开源模板做提案的时候, 抓包工具老是有外部Request. 问题出在某css中有这么一句: @import url(https://fonts.googleapis.com/css?famil ...
- 实用的几个JS新特性(es 2016)
在Chrome 55下测试,可用. 1.箭头函数(arrow function) 以前写的匿名函数是这样的 function(){}, 现在可以简单写成这样()=>{} 如果直接return,没 ...
- 微服务 Micro services
微服务 (Microservices) 是一种软件架构风格,它是以专注于单一责任与功能的小型功能区块 (Small Building Blocks) 为基础,利用模组化的方式组合出复杂的大型应用程序, ...
- python基础数据类型—int、bool、字符串的常用方法
1.int int为整型数据,主要用于计算和类型转化(将字符串转为数字) 常用方法 #bit_length()当用二进制表示数字时所用最少位数,如下十进制数12用二进制表示是1100(bin),所以# ...
- HTML5-canvas-基础篇
<canvas>新元素 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来 ...
- 欧拉筛法模板&&P3383 【模板】线性筛素数
我们先来看欧拉筛法 •为什么叫欧拉筛呢?这可能是跟欧拉有关 •但是为什么叫线性筛呢?因为它的复杂度是线性的,也就是O(n),我们直接来看代码 #include<cstdio> #inc ...
- MySQL 同一台服务器同步数据
声明:我配置出来的slave_io_running和slave_sql_running都是yes.但是数据并没有同步! 希望有遇到相同问题的朋友,能够告诉我一下解决方案? 首先,如何在同一个服务器安装 ...