<el-table ref="multipleTable"
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
stripe
tooltip-effect="dark"
style="100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="">
</el-table-column>
<el-table-column label="日期" width="">
<template slot-scope="scope">{{scope.row.date | dateFormat}}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" width="">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[2, 4, 6, 8]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
data() {
return {
stripe: true,
currentPage: 1,
pagesize: 2,
total: "",
tableData:[],
multipleSelection: []
};
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection);
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.pagesize = val;
// 注意:在改变每页显示的条数时,要将页码显示到第一页
this.currentPage = 1;
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage = val;
}
},
created: function() {
this.tableData=tablelist.tableData
console.log(this.tableData)
this.total = this.tableData.length;
console.log(this.total)
}

vue+element-ui 实现分页的更多相关文章

  1. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

  2. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  3. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  4. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  5. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  6. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  7. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  8. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  9. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  10. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

随机推荐

  1. java访问控制---java编程语言

  2. C语言中的位操作(15)--确定log10(N)的整数部分

    本篇文章介绍一个整数的以10为底的对数的整数部分,即对于整数N,求log10(N)整数部分 方法一 : unsigned int v; //32位非0整数 int r; // r保存结果 int t; ...

  3. 现有exe转为服务_方式01

    1.安装X.exe服务: ...>路径\X.exe /install 2.卸载X.exe服务: ...>路径\X.exe /uninstall 3.开始运行XX(程序是X.exe,服务名是 ...

  4. Codeforces 479E Riding in a Lift:前缀和/差分优化dp

    题目链接:http://codeforces.com/problemset/problem/479/E 题意: 有一栋n层的房子. 还有一个无聊的人在玩电梯,每次玩电梯都会从某一层坐到另外一层. 他初 ...

  5. BZOJ 2431 [HAOI2009]逆序对数列:dp 逆序对

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2431 题意: 给定n,k,问你有多少个由1~n组成的排列,使得逆序对个数恰好为k个. 题解 ...

  6. 文件复制的另一种选择,使用FileChannel复制文件

    通常来说,FileChannel比普通的缓冲输入输出流有更高的效率     import java.io.File; import java.io.FileInputStream; import ja ...

  7. 修改Hosts文件,禁止访问指定网页

    不知道Hosts文件什么鬼的朋友可以在网上搜索一下(大牛勿喷- -) 访问网址时,先查询本地的Hosts文件,那么如果我们将Hosts文件中的网址与IP的映射修改之后,将访问错误的IP. 如在文件尾追 ...

  8. L99

    You're not obligated to win. You're obligated to keep trying.你不一定要获胜,但你必须不断尝试.He announced an expans ...

  9. Android中高效的显示图片之二——在非UI线程中处理图片

    在“加载大图”文章中提到的BitmapFactory.decode*方法,如果源数据是在磁盘.网络或其它任何不是在内存中的位置,那么它都不应该在UI线程中执行.因为它的加载时间不可预测且依赖于一系列因 ...

  10. CCUserDefault 存档

    void HelloWorld::testCCUserDefault() { CCSize size = CCDirector::sharedDirector()->getWinSize(); ...