vue分页组件二次封装---每页请求特定数据
关键步骤:
1.传两个参数:pageCount (每页条数)、pageIndex (页码数);
2.bind方法的调用
<!-- 这部分是分页 -->
<div class="yema">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10,20,30]"
:page-size="pageCount"
layout="total,jumper,prev, pager, next,sizes"
:total="totalpage" >
</el-pagination>
</div>
<!-- 这部分是分页 End--> js代码: totalpage: " ",
currentPage:1, // 默认显示第一条
pageCount:5,//每页显示条数 //分页 初始页currentPage、初始每页数据数pagesize // 每页条数 console.log(`每页 ${val} 条`);
handleSizeChange:function(pageCount){ var that = this; that.form.pageCount = pageCount; //每页显示条数 that.$options.methods.qryBtn.bind(this)(); console.log("pageCount==>",pageCount ); }, // 当前 页码数 console.log(`当前页: ${val}`);
handleCurrentChange:function(pageIndex){
var that = this; // 赋值:后面的pageIndex 赋值给 that.form.pageIndex
that.form.pageIndex = pageIndex;//页码 // 方法调用方法
that.$options.methods.qryBtn.bind(this)(); console.log("pageIndex==>", this.form.pageIndex); }
本例对特别请求特别多数据时,该方法大有用处。仅作参考。如有疑问,请联系。。。
vue分页组件二次封装---每页请求特定数据的更多相关文章
- 基于 bootstrap 的 vue 分页组件
申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
- 《手把手教你》系列基础篇(九十七)-java+ selenium自动化测试-框架设计篇-Selenium方法的二次封装和页面基类(详解教程)
1.简介 上一篇宏哥介绍了如何设计支持不同浏览器测试,宏哥的方法就是通过来切换配置文件设置的浏览器名称的值,来确定启动什么浏览器进行脚本测试.宏哥将这个叫做浏览器引擎类.这个类负责获取浏览器类型和启动 ...
- element el-table表格的vue组件二次封装(附表格高度自适应)
基于vue的el-table表格二次封装组件方法 前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多 ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- vue分页组件table-pagebar
之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...
- 浅尝Vue.js组件(二)
本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...
- vue分页组件重置到首页问题
分页组件,可以借用这个老哥的@暴脾气大大https://www.cnblogs.com/sebastian-tyd/p/7853188.html#4163272 但是有一个问题就是下面评论中@ Mrz ...
- 【vue】axios二次封装,更好的管理api接口和使用
在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...
随机推荐
- [Java 泥水匠] Java Components 之二:算法篇之项目实践中的位运算符(有你不懂的哦)
作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583] ...
- Eureka客户端注册多网卡下IP选择问题
在使用Spring Cloud多人协作开发时有一个场景:我本机启动了Eureka注册中心,其他人机器需要将服务注册到我本机的Eureka.(服务端和客户端在不同机器上) 这时出现了一个问题:服务成功注 ...
- curl模拟post json或post xml文件
转自: https://www.cnblogs.com/xiaochina/p/9750851.html 问题描述: Linux用命令模拟接口,对接口判断!post文件xml/json 问题解决: c ...
- RabbitMQ系列(三)RabbitMQ交换器Exchange介绍与实践
RabbitMQ交换器Exchange介绍与实践 RabbitMQ系列文章 RabbitMQ在Ubuntu上的环境搭建 深入了解RabbitMQ工作原理及简单使用 RabbitMQ交换器Exchang ...
- 解读经典《C#高级编程》第七版 Page20-32.核心C#.Chapter2
前言 讲到核心C#的语法,其实很难讲,因为大部分是基础知识.如果只讲入门的基础知识,那细节又多,意义也不大.我们就不讲一般性的内容,而是找一些有趣的点,展开讲讲. 01 Hello World Hel ...
- HDUOJ-2089 不要62
Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来 ...
- Java编程思想——异常
1.异常对象的方法printStackTrace 作用是打印Throwable和Throwable的调用栈轨迹. 2.finally 不管抛没抛出异常,都会执行finally中的代码.前提是出异常的代 ...
- 基础篇:8.如何定义变量?js变量有什么特点?
书接上文,废话不多说,直接进入正题,下面我们一起来讨论js中的变量那些事! 那什么是变量? 变量是存储信息的容器,可以存储任何类型的数据. 如何定义变量呢? 变量可以使用短名称,如x,y:也可以是长名 ...
- Android Studio 使用Toast
Toast 是Android系统中体重的一种非常好的提醒方式 在程序中可以将很小的一段消息提醒给用户 在一段时间后自动消失,不会占用如何屏幕空间 Button button1=(Button) fin ...
- ASP.NET Core中使用Graylog记录日志
以下基于.NET Core 2.1 定义GrayLog日志记录中间件: 中间件代码: public class GrayLogMiddleware { private readonly Request ...