<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. STL头文件有哪些及简单介绍

    #include <iostream>标准输入输出cin cout等 #include <algorithm> 算法库 如sort find等 #include <vec ...

  2. 分享知识快乐自己:Layui 常用样式

    下载 样式包  Layui  layer 引入 js 及 样式: <link rel="stylesheet" href="${ctx}/static/layui/ ...

  3. scanf和cin的返回值

    需要连续从标准输入读取数据时,可以采用下面两种不同的方式判断文件结束: [cpp] view plaincopy   int i; while(scanf("%d",&i) ...

  4. Unity3D之Mesh(五)绘制圆

    前言: Unity3D中Mesh的基本单位是三角形,而圆形就是由许许多多的三角形组成的.那么我们就知道了绘制圆形的Mesh需要两个变量:圆的半径  以及分割数: 一.实现过程 基本过程与之前的类似,最 ...

  5. 关于phonegap的cookie

    angular搞了一半现在开始搞phonegap(确切的说应该叫cordova). 因为有很紧迫的需求,所以我也不能系统的学,只能遇到啥问题就解决啥.第一个问题就是cookie. 经过调研,cordo ...

  6. 自定义ajax小工具以及使用

    function createXMLHttpRequest(){ try{ return new XMLHttpRequest(); }catch(e){ try{ return new Active ...

  7. leetcode 205. Isomorphic Strings(哈希表)

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  8. 数据库的join查询

    假设我们有两张表. Table A 是左边的表. Table B 是右边的表. 其各有四条记录,其中有两条记录是相同的,如下所示: id name id name -- ---- -- ---- 1 ...

  9. Android中高效的显示图片之三——缓存图片

    加载一张图片到UI相对比较简单,如果一次要加载一组图片,就会变得麻烦很多.像ListView,GridView,ViewPager等控件,需要显示的图片和将要显示的图片数量可能会很大. 为了减少内存使 ...

  10. ACM学习历程—FZU2195 检查站点(树形DP || 贪心)

    Description 在山上一共有N个站点需要检查,检查员从山顶出发去各个站点进行检查,各个站点间有且仅有一条通路,检查员下山前往站点时比较轻松,而上山时却需要额外的时间,问最后检查员检查完所有站点 ...