vue element-UI前端分页
需求:后台获取数据,在前端分页
说明:在table组件加入
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
其中:currentPage:当前页
pagesize:页码包含条数当然
当然,以上参数也要和分页参数关联上。
table的插件
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe fit empty-text="暂无数据" style="width: 100%":default-sort="{prop: 'date', order: 'descending'}"><el-table-columnprop="fbno"label="编号"sortablewidth="140"></el-table-column><el-table-columnprop="area"label="面积"sortablewidth="160"></el-table-column></el-table>
分页的插件:数据较少,我就每页1、2、3、4条做测试了。
<div class="paging" ><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[1, 2, 3, 4]":page-size="1"backgroundlayout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>
关联的data:
data() {return {pagesize:1,total:0,currentPage:1,}},
关联的方法:
handleSizeChange(val) {this.pagesize =val;},handleCurrentChange(val) {this.currentPage = val;},
vue element-UI前端分页相关推荐
- Vue + Element UI 表格分页记忆选中,分页切换 页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
- Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
最新文章
- 提花原理与计算机,电脑提花袜的设计原理与方法:提花女袜
- 【业务】现金贷获客之道业务流程分析
- leetcode 290. 单词规律(Java版)
- 样本量过少时,如何科学衡量喜好程度?
- java个人支付系统(springboot)
- matlab lpfilter.m,histroi/statmoments/lpfilter/dftuv的Matlab程序
- 工业以太网交换机常见故障排除的三种方法
- 硕士可以跟别的导师做实验吗_如何成为一名导师可以成为双刃剑
- form必填默认校验_Salesforce LWC学习(十六) Validity 在form中的使用浅谈
- 物联网设备感染Mirai病毒发起的DDoS攻击
- 贝叶斯集锦:贝叶斯统计基础
- 在M1 mac 使用Ps 2021上导出 PNG 格式发生未知错误如何解决?
- 开发小工具和一些小技巧
- Kubernetes Downward API的介绍及使用
- 【it修真院】代码生成
- 12-Web安全—基于SQL Server的报错注入——and,conver,cast
- oracle临时表经常被锁_linux安装oracle
- MacOS Ventura 13.0 (22A380) 正式版带 OC 0.8.5 and winPE 双分区原版黑苹果镜像
- Unable to access jar file xxx.jar
- 在微信小程序中如何使用wx.onLocationChange()【转载】