<div class="block1">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange" //页面变化时的函数
:current-page.sync="currentPage1" // 设置默认页,在data中为1
:page-size="7" // element 是根据page-size 和 total 来显示你有多少页码。如果不在此设置page-size,只在data中设置 pageSize不行的
layout="total,prev, pager, next"
:total="total">
</el-pagination>
</div>

如果不设置pageSize ,它只显示了8.我在data中设置了每页7条,总共才56 ,远达不到默认的总条数74。 所以    :pageSize    是必要的。 后面的分页则只需要传入pageNum了。

handleCurrentChange(val) {
console.log(`当前页: ${val}`);
const _this = this;
_this.getUrl(val) // 调取列表的函数,初始化时调一次。
},

elementUI 的el-pagination 分页功能的更多相关文章

  1. 在vue+elementUI项目中使用分页功能

    HTML: <div class="mRttt">         <!-- 分页 -->          <el-pagination       ...

  2. 项目中的一个分页功能pagination

    项目中的一个分页功能pagination <script> //总页数 ; ; //分页总数量 $(function () { // $("#pagination"). ...

  3. Django【进阶】分页功能Pagination

    项目中,我们需要很多非业务逻辑的功能,例如分页功能,而且此类功能移植性很好,可以在不同的项目中使用,所以整理好这些功能会一定程度上提高开发效率,下面是分页功能代码,使用时,可单独放在utils目录 & ...

  4. 应用五:Vue之ElementUI 表格Table与分页Pagination组件化

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 在平时的web项目开发过程中,列表分页查询展示应用的很频繁,为了便于阅读并减少代码的冗余,所 ...

  5. pagination实现分页功能

    pagination.js: /** * pagination分页插件 */ ;(function($,window,document,undefined){ //配置参数 var defaults ...

  6. 分页功能的实现——Jdbc && JSP

    @目录 什么是分页 ? 两个子模块功能的问题分析 和 解决方案 有条件查和无条件查询的影响 和 解决方案 项目案例: mysql + commons-dbutils+itcast-tools+Base ...

  7. 《JavaWeb从入门到改行》分页功能的实现

    @目录 什么是分页 ? 两个子模块功能的问题分析 和 解决方案 有条件查和无条件查询的影响 和 解决方案 项目案例: mysql + commons-dbutils+itcast-tools+Base ...

  8. 原生js实现分页功能

    原生就是实现分页功能 代码如下: var pagination = function(option,fun){ this.parentId = option.id; //容器 this.pageSiz ...

  9. 测试开发【提测平台】分享9-DBUntils优化数据连接&实现应用搜索和分页功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 从本期开始知识点讲以思维导图的形式给出,内容点会按照讲解-应用-展示的形式体现,这样会更清晰些. DBUntils连接池 在项目中链接数据 ...

  10. 【jQuery 分页】jQuery分页功能的实现

    自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部  和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...

随机推荐

  1. 区间节点的lca

    题目hdu5266 分析:多节点的LCA就是dfs序中最大最小两个节点的LCA.所以只要每次维持给出节点的dfs序的最大最小,然后就是两点的LCA 代码: rmq的st+lca的倍增 #include ...

  2. JQ的live学习

    $("#StartTime").live("blur keypress keyup",function(){ if($("#EndTime" ...

  3. JavaWeb的几种设计模式

    原文:http://blog.csdn.net/yue7603835/article/details/7479855 Java Web开发方案有多种可供选择,这里列举一些经典的开发模式进行横向比较,为 ...

  4. 二、spring的IoC

    IoC的基本认识 Inversion of Control:控制反转,就是将对象的创建权反转交给spring IoC的好处 传统方式的程序编写,底层的实现切换了,需要修改源代码 使用spring之后, ...

  5. C#设计模式V2(1)——单例模式

    出自:https://www.cnblogs.com/zhili/p/SingletonPatterm.html 一.引言 最近在设计模式的一些内容,主要的参考书籍是<Head First 设计 ...

  6. 阿里云Linux(Centos7)下搭建SVN服务器

    1,使用yum安装SVN yum -y install subversion 安装完成之后,验证安装结果 svn help 2,新建仓库目录 在/usr/soft目录下面创建一个svn目录,用来作为s ...

  7. 利用Swiperefreshlayout实现下拉刷新功能的技术探讨

    在常见的APP中通常有着下拉页面从而达到刷新页面的功能,这种看似简单的功能有着花样繁多的实现方式.而利用Swiperefreshlayout实现下拉刷新功能则是其中比较简明扼要的一种. 一般来说,在竖 ...

  8. 利用powerDesigner15.1连接oracle数据库并自动生成表结构

    利用powerDesigner15.1连接oracle数据库并自动生成表结构 参考:http://blog.csdn.net/qq_24531461/article/details/76713802 ...

  9. 【UML】最简单的类图

    Rational Rose简明实用教程  https://blog.csdn.net/gz153016/article/details/49641847 Rational Rose是Rational公 ...

  10. 部署.net Core 到 Windows server 2008 r2 IIs

    1. 将项目发布 2.iis 新建网站,设置 3 安装windows  server  hosting 4 关于报错 1.下载sdk https://www.microsoft.com/net/lea ...