现在写的Vue+ElementUI是自己写的是文档上的死数据,所以在分页上自己分割了一下,如果有接口话,会方便一点,使用的是分页的完整功能。都差不多啦! 撸起来

<template>
<div>
<el-table :data="tableData.slice((limitePage.page-1)*limitePage.limit,limitePage.limit*limitePage.page)" border style="width: 100%">
<el-table-column fixed prop="date" label="日期" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="province" label="省份" width="120">
</el-table-column>
<el-table-column prop="city" label="市区" width="120"> </el-table-column>
<el-table-column prop="address" label="地址" width="300"> </el-table-column>
<el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small"
v-if="scope.row.date != '2016-05-02'"
>查看</el-button
>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<span class="demonstration"></span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="limitePage.page"
:page-sizes="[2, 4]"
:page-size="limitePage.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</div>
</div>
</template> <script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
],
limitePage:{
limit:2,
page:1
}
};
},
methods: {
handleClick(row) {
console.log(row);
},
handleSizeChange(val) {
this.limitePage.limit = val;
},
handleCurrentChange(val) {
this.limitePage.page = val
}
}
};
</script> <style>
</style>

其实上面的代码都是复制粘贴的 …………

需要注意的几点是在分页组件上写的几个属性

total :代表的是数据的总长度

page-size:代表的是每一页数据的长度

current-page:代表当前页数

page-sizes:每页显示个数选择器
 
注意的方法:
size-change:pageSize 改变时会触发(就是选择多少条一页下拉框触发)
current-change:currentPage 改变时会触发 (就是选择页码触发)
 
至于limit 和page写在一个对象里,是为直接传参调取后台接口,这样写不写 都ok,看你这么方便怎么来咯
 
这里的分页由于是死数据 所以在table 写了一个slice 实现的分页
如果有后台接口,直接传步长和页数 后台就会返给你 不需要slice分页  
 

vue+ElementUI 分页的更多相关文章

  1. vue Element-UI 分页使用(1)

    最近在使用Element-UI这套框架配合Vue来写前端页面.在用Element-UI来制作表格的时候,遇到了一些小问题,记录方便学习. 其中两个事件是关于切换当前页和切换显示的列表条数的.另外的属性 ...

  2. vue element-ui 分页组件封装

    <template> <el-pagination @size-change="handleSizeChange" @current-change="h ...

  3. 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  4. vue+element-ui 实现分页(根据el-table内容变换的分页)

    官方例子 官方提示: 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示.prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,si ...

  5. 关于vue+element-ui项目的分页,返回默认显示第一页的问题解决

    关于vue+element-ui项目的分页,返回默认显示第一页的问题解决     问题描述 当前页面如下: 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面 然后在新页面点击返回按钮,返 ...

  6. vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择

    一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...

  7. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  8. spring boot + vue + element-ui

    spring boot + vue + element-ui 一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档h ...

  9. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

随机推荐

  1. jenkins+jmeter+ant+jmeter在Jenkins上报告

    1.jmeter+ant 参考 http://www.cnblogs.com/dieyaxianju/p/8268802.html 2.在jenkins上配置 3.执行成功 4.配置报告  参考 下载 ...

  2. 刚開始学习的人非常有用之chm结尾的參考手冊打开后无法正常显示

    从网上下载了struts2的參考手冊.chm(本文适用全部已.chm结尾的文件)不能正常打开使用. 如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/ ...

  3. JS网页播放声音实现代码兼容各种浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JavaScript 获取星期几函数

    function getDayofWeek() {            var day = "";            var time = new Date();       ...

  5. 深入理解Redis(番外)——持久化

    引语 Redis作为一款内存数据库,自然所有数据都加载在内存中,那么自然就有小伙伴会问,如果服务器宕机了怎么办,数据不都丢了吗,不用担心,Redis早就提供了两种方式来将数据进行持久化,即便服务器宕机 ...

  6. Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) C. Destroying Array -- 逆向思维

    原题中需要求解的是按照它给定的操作次序,即每次删掉一个数字求删掉后每个区间段的和的最大值是多少. 正面求解需要维护新形成的区间段,以及每段和,需要一些数据结构比如 map 和 set. map< ...

  7. android平台 cocos2d-x 读取相册数据

    现已解决 方案如下: 1.使用 jni 调用 java 方法 启动相册选择框2.使用java将获取的图片保存到本地3.使用Cocos2d-x中 CCImage 读取 JAVA代码如下: //启动图片选 ...

  8. MessageDigest 加密和解密2

    package com.drawthink.platform.util; import java.security.MessageDigest; import java.security.NoSuch ...

  9. 生成器模式(Builder)C++实现

    意图:将一个复杂对象的创建与它的表示分离,使得同样的构建过程可以创建不同的表示. 适用性:1.当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方式时. 2.当构建过程必须允许被构建的对象有 ...

  10. 【PostgreSQL-9.6.3】修改监听的IP和端口

    在数据目录下编辑postgresql.conf文件,我的数据目录是/usr/local/pgsql/data vi postgresql.conf 找到如下内容: ... #listen_addres ...