vue+element-ui 实现分页
<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 实现分页的更多相关文章
- Vue+element UI实现分页组件
介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
随机推荐
- html转义字符及css清除
1. [代码][Java]代码 import java.util.HashMap;import java.util.Map; import org.apache.commons.lang3. ...
- Android Studio Mac版快捷键
mac上按键符号 ⌥ : option / alt ⇧ : shift ⌃ : control ⌘ : command ⎋ : esc (一)查找/查看相关 搜索任意内容 双击 sft 当前文件查找/ ...
- BEC listen and translation exercise 46
录音文件 https://pan.baidu.com/s/1qYYZGWO The process of learning and exploring a subject can lead to a ...
- python中的生成器(generator)总结
1.实现generator的两种方式 python中的generator保存的是算法,真正需要计算出值的时候才会去往下计算出值.它是一种惰性计算(lazy evaluation). 要创建一个gene ...
- stl_queue.h
stl_queue.h // Filename: stl_queue.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: http:/ ...
- codeforces914G Sum the Fibonacci
题目大意:给定一个长为$n$($n\leq 10^6$)的序列S,定义一个合法的五元组$(a,b,c,d,e)$合法当且仅当 $$ ( S_a \mid S_b ) and S_c and ( S_d ...
- D唐纳德和他的数学老师(华师网络赛)(二分匹配,最大流)
Time limit per test: 1.0 seconds Memory limit: 256 megabytes 唐纳德是一个数学天才.有一天,他的数学老师决定为难一下他.他跟唐纳德说:「现在 ...
- Oracle12c多租户如何连接到CDB或PDB、CDB与PDB容器切换
Oracle 数据库 12 c 多租户选项允许单个容器数据库 (CDB) 来承载多个单独的可插拔数据库 (PDB).那么我们如何连接到容器数据库 (CDB) 和可插拔数据库 (PDB). 1. V$S ...
- (转)python set 用法
转载自:http://hi.baidu.com/����_xu/blog/item/5b9650c513bd3f049d163d8b .html python的set和其他语言类似, 是一个 基本功能 ...
- MySQL on Azure高可用性设计 DRBD - Corosync - Pacemaker - CRM (二)
在上一篇文章中描述了MySQL HA on Azured 设计思路,本篇文章中将描述具体的部署,每个组件的安装和配置. 整体的设计架构如下: 下面将是所有组件的安装配置过程,所有的虚拟机是CentOS ...