Vue element 分页
Vue单页面，有一个带分页的表格，表格内数据关联页码，套路如下：
代码如下：
<div class="c-table-list auth-list m-bottom-20">
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :default-sort="{prop:'value4',order:'descending'}" stripe>
<el-table-column label="序号" width="100" align="left" type="index"></el-table-column>
<el-table-column label="中文名称" align="left" prop="value1"></el-table-column>
<el-table-column label="登录名" align="left" prop="value2"></el-table-column>
<el-table-column label="状态" align="left" prop="value3"></el-table-column>
<el-table-column label="注册时间" align="left" prop="value4" sortable></el-table-column>
<el-table-column label="性别" align="left" prop="value5"></el-table-column>
<el-table-column label="部门" align="left" prop="value6"></el-table-column>
<el-table-column label="岗位" align="left" prop="value7"></el-table-column>
<el-table-column label="操作" align="left">
<template slot-scope="scope">
<div>
<a @click="onSubmit" class="show-underline a-click" href="#">查看</a>
<a @click="onSubmit" class="show-underline a-click" href="#">编辑</a>
<a @click="onSubmit" class="show-underline a-click" href="#">删除</a>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="t-right">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 30, 40]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
prev-text="上一页"
next-text="下一页"
:total="tableData.length">
</el-pagination>
</div>该方法是每页显示多少数据的截取方法 :data="tableData.slice((currentPage-1)pagesize,currentPagepagesize)"；
以下是script内代码：
export default {
data () {
return {
currentPage: 1,
pagesize: 5,
formInline: {
user: '',
region: ''
},
tableData: [
{
value1: '光电缆政治工区域',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:30:15',
value5: '男',
value6: '黄石通信车间',
value7: '主任'
},
{
value1: '赵永铭',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:30:16',
value5: '女',
value6: '汉口动车组无线检修工区',
value7: '副主任'
},
{
value1: '汉口动车组无线检修工区',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:30:17',
value5: '男',
value6: '汉口动车组无线检修工区',
value7: '车间主任'
},
{
value1: '光电缆政治工区域',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:30:18',
value5: '男',
value6: '黄石通信车间',
value7: '主任'
},
{
value1: '赵永铭',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:30:19',
value5: '女',
value6: '汉口动车组无线检修工区',
value7: '副主任'
},
{
value1: '汉口动车组无线检修工区',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:30:26',
value5: '男',
value6: '汉口动车组无线检修工区',
value7: '车间主任'
},
{
value1: '光电缆政治工区域',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:30:36',
value5: '男',
value6: '黄石通信车间',
value7: '主任'
},
{
value1: '赵永铭',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:30:46',
value5: '女',
value6: '汉口动车组无线检修工区',
value7: '副主任'
},
{
value1: '汉口动车组无线检修工区',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:30:66',
value5: '男',
value6: '汉口动车组无线检修工区',
value7: '车间主任'
},
{
value1: '汉口动车组无线检修工区',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:31:16',
value5: '男',
value6: '汉口动车组无线检修工区',
value7: '车间主任'
},
{
value1: '汉口动车组无线检修工区',
value2: 'wertyukjhg',
value3: '启用',
value4: '2018-05-03 09:31:16',
value5: '男',
value6: '汉口动车组无线检修工区',
value7: '车间主任'
}
]
};
},
methods: {
onSubmit () {
alert('Have not been done!');
},
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
}
}
};效果如图：
Vue element 分页的更多相关文章
- 循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理
在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...
- vue+element实现分页--之--前端分页
效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- Vue 实现分页+输入框关键字筛选
分页的实现(Vue+Element)+输入框关键字筛选 1.这里用的是Element 自带的分页组件 <template> <div class="sales-table& ...
- 新书上线：《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚
新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- 循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理
在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...
- 循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
随机推荐
- C#将时间转化自定义类型格式，C#获取时间间隔
C# string.Format格式化日期: DateTime dt = ,,,,,,); string.Format("{0:y yy yyy yyyy}",dt); //17 ...
- ios监听静音键和音量键事件
http://blog.csdn.net/slinloss/article/details/7870559
- lvs+keepalived+ipvsadm 完整搭建笔记
原文:http://www.safecdn.cn/2018/12/lvs-keepalived-ipvsadm/ 1.环境介绍: 系统:centos 6.7 keepalived VIP1 :10.0 ...
- Linux命令、脚本
1.传文件 FTP/SFTP:ftp 用户名@远程ip SCP:注意ip后有个 : 本地文件发到远程 scp 本地文件 用户名@远程ip:远程路径 远程文件发到本地 scp 用户名@远程ip: ...
- Rabbitmq 安装后采坑
一.接手项目 接手项目后,按别人说的先安装什么,后安装什么然后就可以用了,也不去看什么.先开始安装的是otp_win64_19.1工具包和rabbitmq-server-3.6.5服务端,在win10 ...
- Monggodb基础
MongoDB 查询文档使用 find() 方法. find() 方法以非结构化的方式来显示所有文档. 语法 MongoDB 查询数据的语法格式如下: db.collection.find(query ...
- python学习（二）--数据类型
数据类型 1.工厂函数 type() int() float() str() list() tuple() dict() bool() set()工厂函数的理解:工厂函数看上去有点像函数,实质上他们是 ...
- 阿里云短信验证使用（PHP）
1.登陆阿里云后台,事先添加签名和模板 2.使用composer下载阿里云SDK composer require alibabacloud/sdk 在PHP7.0下安装需要提前安装curl扩展 -c ...
- Unix shell范例精解 课后题
1.read #屏幕输入read name #输入名字 2.echo #在终端打印出内容echo "What is your name ?" # What is your n ...
- [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(三) -- 安装confluence 6.6.1
[原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(三) -- 安装confluence 6.6.1 有了安装Jira的经验, 这次再安装conflue ...