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页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
随机推荐
- Vue 使用axios获取数据
axios 的使用 1.安装 cnpm install axios --save 2.哪里用哪里引入axios <script> import Axios from 'axios' ...
- 关于getClass()的一些自己的见解
通过观看视频讲解,我得知,Class 老师讲解的是 这个是类的类,即是管理类的类.当时不是很理解,随后查询了相关资料后,以及真切的运行了几行代码后,才有一些深层次的体会, 在这里想要跟大家分享一下.如 ...
- SAML 2.0初始
一.背景知识: SAML即安全断言标记语言,英文全称是Security Assertion Markup Language.它是一个基于XML的标准,用于在不同的安全域(security domain ...
- python的str.format方法
format方法被用于字符串的格式化输出. print('{0}+{1}={2}'.format(1,2,1+2)) #in 1+2=3 #out 可见字符串中大括号内的数字分别对应着format的几 ...
- 使用 nodeJs 开发微信公众号（设置自动回复消息）
微信向第三方服务器发送请求时会降 signature .timestamp. nonce . openid(用户标识),发送内容会以 xml 的形式附加在请求中 回复消息前提我们得拿到用户id , 用 ...
- 《用Python做HTTP接口测试》练习资料共享
原作者代码在https://github.com/akuing/python-http-interface-test
- PHP+Ajax实现文件上传功能
前端显示界面: 1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- thinkphp51初始化方法initialize
此方法是在所有方法之前被调用的. class Index extends Controller { public function _initialize() { echo 'init<br/& ...
- Rocket MQ 2 - Namesrv
通过上文中使用可以看到,主要逻辑还是在NamesrvController中包含KVConfigManager负责配置相关的读写,RouteInfoManager负责路由信息的管理; 启动定时任务定时打 ...
- 提升lua代码效率
local test = {} , do test[ i ] = {} end local t1 = os.clock( ) , do test[ ].mValue = end local t2 = ...