<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. UVA 1664 Conquer a New Region (并查集+贪心)

    并查集的一道比较考想法的题 题意:给你n个点,接着给你n-1条边形成一颗生成树,每条边都有一个权值.求的是以一个点作为特殊点,并求出从此点出发到其他每个点的条件边权的总和最大,条件边权就是:起点到终点 ...

  2. MacacaUIFinder元素查找器

    MacacaUIFinder元素查找器 1. 这是什么? 这是一个用JavaSwing写的Macaca元素查找器,方便测试的小伙伴们定位元素,如果觉得不错,还请点个Star鼓励下,嘿嘿. 地址:htt ...

  3. 分享知识-快乐自己:关于 String 小案例

    单个字符出现的次数: /*** * 验证是否符合拆分条件 * * @param text * 原字符串 * @param sub * 判断条件 * @return */ public static i ...

  4. 分享知识-快乐自己:SpringBoot集成热部署配置(一)

    摘要: 热部署与热加载: ava热部署与Java热加载的联系和区别: 1):Java热部署与热加载的联系: 1.不重启服务器编译/部署项目 2.基于Java的类加载器实现 2):Java热部署与热加载 ...

  5. ES _all、_source的使用——_all字段连接所有字段的值构成一个用空格(space)分隔的大string而被analyzed和index,document主体保存在_source中

    1._all 1.1_all field _all字段是一个很少用到的字段,它连接所有字段的值构成一个用空格(space)分隔的大string,该string被analyzed和index,但是不被s ...

  6. AngularJS学习笔记(一) 关于MVVM和双向绑定

    写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之 ...

  7. html网页小图标

    <link rel="shortcut icon" href="../image/favicon.ico"/>

  8. hdu-5653 Bomber Man wants to bomb an Array.(区间dp)

    题目链接: Bomber Man wants to bomb an Array. Time Limit: 4000/2000 MS (Java/Others)     Memory Limit: 65 ...

  9. sql split函数

    --DROP FUNCTION F_SQLSERVER_SPLIT GO CREATE FUNCTION F_SQLSERVER_SPLIT(@Long_str varchar(8000),@spli ...

  10. LOJ2305 「NOI2017」游戏

    「NOI2017」游戏 题目背景 狂野飙车是小 L 最喜欢的游戏.与其他业余玩家不同的是,小 L 在玩游戏之余,还精于研究游戏的设计,因此他有着与众不同的游戏策略. 题目描述 小 L 计划进行$n$场 ...