vue+element-ui的分页完整版
2019独角兽企业重金招聘Python工程师标准>>>
页面展示:
vue组件中分页代码:
<div class="pagination"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="cur_page":page-sizes="[1, 2, 3, 4]":page-size="pageNum"layout="total,sizes, prev, pager, next, jumper":total="totalCount"></el-pagination></div>
先声明变量:
cur_page:1,//默认在第一页
pageNum:1,//默认每页显示1条数据
totalCount:1,//默认总条数为一条
1、操作每页显示几条
//操作每页显示几条handleSizeChange(val) {this.pageNum=val;this.getPackData();//根据用户获取的每页显示页面数量显示页面},
2、操作当前页
handleCurrentChange(val) {this.cur_page = val;this.getPackData();//获取用户点击的当前页后刷新页面数据},
3、总条数获取:
totalPageNum(){this.$axios.get("/api/pagePackMade.do").then(res=>{this.totalCount =res.data[0].count;//总信息条数从数据库获取;}).catch(error=>{console.log(error);})},
转载于:https://my.oschina.net/u/3763385/blog/1928543
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) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- 【前端】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 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
最新文章
- 二次开发基于无线网卡的扫描
- SIEM已死?标题党!
- python无法打印unicode编码_【整理】Python中实际上已经得到了正确的Unicode或某种编码的字符,但是看起来或打印出来却是乱码...
- Golang精编100题
- (chap1 网络基础知识)网络的构成要素:(3)交换机
- unity 批量导入模型工具_如何将VMD舞蹈导入桌面萌娘MMD
- Window下VS运行达梦DPI
- MUI - 解决bug: iphone页面保存时popPicker自动弹出来
- Ajax — 新闻列表
- Nitro-LM保护Flex/AIR应用的安全
- css文件内容的组织
- JDK 13 的 12 个新特性,真心厉害和好用
- Solr -- 实时搜索
- 通达2017OA数据字典
- 微软启动Menlo计划;英特尔手机处理器上市(每日关注20100505)
- Python【第十天】文件与模块
- java8 joda_Joda Time和Java8时差
- 56 Marvin: 一个支持GPU加速、且不依赖其他库(除cuda和cudnn)的轻量化多维深度学习(deep learning)框架介绍...
- 个人发展(职业规划)
- 你不知道的nodejs性能优化
热门文章
- MobileIMSDK怎样修改Server端和安卓端TCP连接方式时报文的的限制大小
- C#中使用Newtonsoft.Json实现对Json字符串的解析
- JS实现限制input上传文件的大小和格式
- python中对集合的操作
- webpack入门启动webpack工程
- 如何使用纯 CSS 创建翻牌动画
- Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面
- 备战5月软考--软件设计师
- 3、ShardingSphere 之 Sharding-JDBC 实现水平分库
- 筹码游戏java代码编写,PAT(Basic Level) 乙级练习题 ------ 1071 小赌怡情 java