基于表格简单示例

<template>
<div style="margin:0 auto;">
<Table :loading="loading" border :columns="columns7" :data="lastdata"></Table>
<br>
<div align="center">
<template>
<Page :total="total" :current="current" :page-size="pageNum" :page-size-opts="arrPageSize"
@on-change="changePage" show-total />
</template>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
current: 1,
total: 9,
pageNum: 8,
arrPageSize: [5],
lastdata: [
{
id: 5,
name: 'John Brown',
price: 18,
number: 'New York No. 1 Lake Park'
}, {
id: 848,
name: 'iPhoneX 全网通 64G',
price: 5299.00,
number: 8
},
{
id: 788,
name: 'iPhone7 Plus 全网通 128G',
price: 4199.00,
number: 3
},
{
id: 898,
name: 'iPhone7 Plus 全网通 32G',
price: 3699.00,
number: 13
},
{
id: 879,
name: 'iPhone8 全网通 256G',
price: 4699.00,
number: 9
},
{
id: 388,
name: 'iPhone7 Plus 全网通 32G',
price: 3699.00,
number: 13
},
{
id: 688,
name: 'iPhone7 Plus 全网通 32G',
price: 3699.00,
number: 13
},
{
id: 188,
name: 'iPhone7 全网通 32G',
price: 2799.00,
number: 8
}
],
columns7: [
{
title: '编号',
key: 'id',
width: 100,
fixed: 'left',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('strong', params.row.id)
]);
}
},
{
title: '商品名称',
key: 'name'
},
{
title: '产品最低售价',
key: 'price'
},
{
title: '库存',
key: 'number'
},
{
title: 'Action',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, 'View'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, 'Delete')
]);
}
}
],
data6: [
{
id: 5,
name: 'John Brown',
price: 18,
number: 'New York No. 1 Lake Park'
}, {
id: 848,
name: 'iPhoneX 全网通 64G',
price: 5299.00,
number: 8
},
{
id: 788,
name: 'iPhone7 Plus 全网通 128G',
price: 4199.00,
number: 3
},
{
id: 898,
name: 'iPhone7 Plus 全网通 32G',
price: 3699.00,
number: 13
},
{
id: 879,
name: 'iPhone8 全网通 256G',
price: 4699.00,
number: 9
},
{
id: 388,
name: 'iPhone7 Plus 全网通 32G',
price: 3699.00,
number: 13
},
{
id: 688,
name: 'iPhone7 Plus 全网通 32G',
price: 3699.00,
number: 13
},
{
id: 188,
name: 'iPhone7 全网通 32G',
price: 2799.00,
number: 8
},
{
id: 88,
name: 'iPhone8 Plus 全网通 64G',
price: 4699.00,
number: 1
}
]
}
},
methods: {
changePage(value) {
console.log(this.data6.length);
this.current = value;
var _start = ( value - 1 ) * this.pageNum;
var _end = value * this.pageNum;
this.lastdata = this.data6 .slice(_start,_end);
},
show(index) {
this.$Modal.info({
title: '产品详情',
content: `编号:${this.data6[index].id}<br>名称:${this.data6[index].name}<br>price:${this.data6[index].price}<br>库存:${this.data6[index].number}`
})
},
propage() {
this.loading = true;
},
remove(index) {
this.data6.splice(index, 1);
}
}
}
</script>
<style>
.pro-page{
position: fixed;
height: 500px;
}
</style>

iView分页组件之分页使用的更多相关文章

  1. Easyui datagrid 修改分页组件的分页提示信息为中文

    datagrid 修改分页组件的分页提示信息为中文 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 默认分页组件为英文展示,如下,希望改成中文展示 ...

  2. drf偏移分页组件-游标分页-自定义过滤器-过滤器插件django-filter

    drf偏移分页组件 LimitOffsetPagination 源码分析:获取参数 pahenations.py from rest_framework.pagination import Limit ...

  3. django 分页组件

      一.仿django分页功能自己实现 urls.py 1 2 3 4 5 6 7 8 9 from django.conf.urls import url from django.contrib i ...

  4. stark组件的分页,模糊查询,批量删除

    1.分页组件高阶 2.整合展示数据showlist类 3.stark组件之分页 3.stark组件之search模糊查询 4.action批量处理数据 4.总结 1.分页组件高阶 1.分页的class ...

  5. drf框架中分页组件

    drf框架中分页组件 普通分页(最常用) 自定制分页类 pagination.py from rest_framework.pagination import PageNumberPagination ...

  6. drf框架 - 过滤组件 | 分页组件 | 过滤器插件

    drf框架 接口过滤条件 群查接口各种筛选组件数据准备 models.py class Car(models.Model): name = models.CharField(max_length=16 ...

  7. drf-过滤组件|分页组件|过滤器

    目录 drf-过滤组件|分页组件|过滤器 群查接口各种筛选组件数据准备 drf过滤组件 搜索过滤组件 | SearchFilter 案例: 排序过滤组件 | OrderingFilter 案例: dr ...

  8. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  9. winform快速开发平台 -> 基础组件之分页控件

    一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...

随机推荐

  1. wlan相关查询命令

    1.查看当前连接的设备 hostapd_cli all_sta

  2. es的相关知识二(检索文档)

    一.es的使用 1.检索文档: 想要从Elasticsearch中获取文档,我们使用同样的 _index  . _type  . _id  ,但是HTTP方法改为 GET  : GET /{index ...

  3. python打包工具distutils、setuptools的使用

    python中安装包的方式有很多种: 源码包:python setup.py install 在线安装:pip install 包名(linux) / easy_install 包名(window) ...

  4. 洛谷P4001 [BJOI2006]狼抓兔子(平面图转对偶图)

    传送门 明明只要最小割加点优化就能过的东西…… 然而我偏偏要去学平面图转对偶图结果发现课件关键地方看不清->这里 而且建图累的半死…… 说实话只要最大流建图的时候反向边直接设为当前边容量再加个当 ...

  5. Java多线程断点下载文件

    Java实现断点续传+多线程下载 如下代码所示,每一步都有注解 思路: 通过URL连接到服务器上要下载的文件,得到文件的大小: 算出每条线程下载的开始位置和结束位置,例如,有两条线程下载100Byte ...

  6. 关于单片机特殊功能寄存器(SFR)和内存(RAM)公用地址:80-FF 如何区分

    RAM 的 80-FF 需要间接寻址进行访问 如:  MOV R0,#80H;    MOV A,@R0 ;  (内存 80H地址内的数据放到A中) SFR的80-FF需要直接寻址进行访问如: MOV ...

  7. OI程序常见的设计陷阱

    宏定义的问题 有时候为了方便,我会大量使用宏定义.但是最近我发现下面这两个宏定义老是出问题: #define SET(x,a) memset(x,a,sizeof(x)) inline void wo ...

  8. 【线性代数】2-2:消元(Eliminate)

    title: [线性代数]2-2:消元(Eliminate) toc: true categories: Mathematic Linear Algebra date: 2017-08-31 16:1 ...

  9. codeforces723E

    One-Way Reform CodeForces - 723E There are n cities and m two-way roads in Berland, each road connec ...

  10. 2016 NEERC, Northern Subregional Contest G.Gangsters in Central City(LCA)

    G.Gangsters in Central City 题意:一棵树,节点1为根,是水源.水顺着边流至叶子.该树的每个叶子上有房子.有q个询问,一种为房子u被强盗入侵,另一种为强盗撤离房子u.对于每个 ...