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页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
随机推荐
- Bootstrap treeview增加或者删除节点
参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...
- Postman A请求的返回值作为B请求的入参（ 拢共分三步）
- CentOS使用nginx部署https服务
nginx安装参考:https://www.cnblogs.com/taiyonghai/p/6728707.html 自签证书生成参考:https://gmd20.github.io/blog/op ...
- ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction解决办法
一.问题描述: 同事反馈线上一个表有其中一条数据无法删除,其他都正常,我拿到删数据的sql,尝试执行,报错如下: mysql> delete from facebook_posts where ...
- Springboot项目读取resource下的静态资源方法
如果按相对路径直接读会定位到target下,因为springboot打包后读到这里 如果做单元测试的话是找不到文件的 File jsonFile = ResourceUtils.getFile(&qu ...
- PHP+Ajax实现文件上传功能
前端显示界面: 1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- win10以管理员身份运行cmd方法
win10以管理员身份运行cmd方法 win8win10以管理员身份运行cmd方法1.直接到 C:\Windows\System32 下面找cmd.exe 右键以管理员方式打开就可以了 2.按WIN+ ...
- css：伪类和伪元素
一:伪类 1. :active 想被激活的元素添加样式 2. :focus 向拥有键盘输入焦点的元素添加样式 3. :hover 当鼠标悬浮在元素上方时,向元素添加样式 4. ...
- PeopleSoft通过status汇总进程运行情况
下面SQL可以按照run_status汇总进程的运行状态 SELECT RQST.RUNSTATUS, RQST.PRCSTYPE, (SELECT XLAT.XLATLONGNAME FROM PS ...
- computer browser服务无法启动 错误1068 依存服务或组无法启动
两台电脑电脑之间传送大文件,发现局域网内共享文件,需要设置文件夹共享,需要开启 Computer Browser服务,而Computer Browser服务项的依存服务项是server服务和works ...