关键步骤:

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分页组件二次封装---每页请求特定数据的更多相关文章

  1. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  2. java+springBoot+Thymeleaf+vue分页组件的定义

    导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...

  3. 《手把手教你》系列基础篇(九十七)-java+ selenium自动化测试-框架设计篇-Selenium方法的二次封装和页面基类(详解教程)

    1.简介 上一篇宏哥介绍了如何设计支持不同浏览器测试,宏哥的方法就是通过来切换配置文件设置的浏览器名称的值,来确定启动什么浏览器进行脚本测试.宏哥将这个叫做浏览器引擎类.这个类负责获取浏览器类型和启动 ...

  4. element el-table表格的vue组件二次封装(附表格高度自适应)

    基于vue的el-table表格二次封装组件方法 前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多 ...

  5. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  6. vue分页组件table-pagebar

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...

  7. 浅尝Vue.js组件(二)

    本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...

  8. vue分页组件重置到首页问题

    分页组件,可以借用这个老哥的@暴脾气大大https://www.cnblogs.com/sebastian-tyd/p/7853188.html#4163272 但是有一个问题就是下面评论中@ Mrz ...

  9. 【vue】axios二次封装,更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

随机推荐

  1. cookie、session总结

    前几天在调试第三方支付接口时碰到一个session失效问题,用了几天时间才搞明白,现在回想一下,主要还是由于cookie和session这一块的一些基本概念没有搞清楚,现总结一下. 浏览器使用HTTP ...

  2. 谈谈 Redux 与 Mobx 思想的适用场景

    谈谈 Redux 与 Mobx 思想的适用场景 Redux 和 Mobx 都是当下比较火热的数据流模型,一个背靠函数式,似乎成为了开源界标配,一个基于面向对象,低调的前行. 函数式 vs 面向对象 首 ...

  3. 手把手使用Docker搭建SpringBoot微服务镜像

    一.环境准备 1.安装好Docker环境的Linux机器(安装教程) 2.准备好SpringBoot项目打包好的可运行jar包 二.编写Dockerfile 1.首先将SpringBoot打包好的ja ...

  4. Oracle 如何开启归档模式

    Oracle开启归档 场景:某所的数据库没有开启归档,如何开启归档模式的文档. 1.查看oracle归档状态 SQL> archive log list; 数据库日志模式 非存档模式 //目前不 ...

  5. Linux之定时任务Crond使用

    Linux之定时任务Crond使用 一.用法 crond服务是linux系统自带的服务,是不需要手动安装的: crond服务是一种守护进程: Linux中的用户使用contab命令来配置corn任务: ...

  6. windows 下 nginx 配置文件路径

    nginx在windowns下路径 http{ #虚拟主机1 server{ listen 80; #监听端口,基于IP配置的时候变更此处,比如192.168.1.100:8080; server_n ...

  7. 路由器动态DNS设置

    路由器中的动态DNS设置非常的简单,只需要注册动态域名服务商的账号,然后在路由器中登录该账号就可以了 一.路由器动态DNS作用 无线路由器连接宽带上网后,路由器会从宽带运营商那里获取一个IP地址,这个 ...

  8. MyISAM和InnoDB区别详解

    MyISAM是MySQL的默认数据库引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的顺序访问方法)所改良.虽然性能极佳,但却有一个缺点 ...

  9. Python3 系列之 可变参数和关键字参数

    刚开始接触 python 的时候,对 python 中的 *wargs (可变参数) 和 **kwargs (关键字参数)的理解不是很透彻,看了一下 <Explore Python>一书, ...

  10. JVM虚拟机深入理解+GC回收+类加载

    旭日Follow_24 的CSDN 博客 ,全文地址请点击: https://blog.csdn.net/xuri24/article/details/81455449 一,前言 本文章是读了“深入理 ...