elementUI 的el-pagination 分页功能
<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 分页功能的更多相关文章
- 在vue+elementUI项目中使用分页功能
HTML: <div class="mRttt"> <!-- 分页 --> <el-pagination ...
- 项目中的一个分页功能pagination
项目中的一个分页功能pagination <script> //总页数 ; ; //分页总数量 $(function () { // $("#pagination"). ...
- Django【进阶】分页功能Pagination
项目中,我们需要很多非业务逻辑的功能,例如分页功能,而且此类功能移植性很好,可以在不同的项目中使用,所以整理好这些功能会一定程度上提高开发效率,下面是分页功能代码,使用时,可单独放在utils目录 & ...
- 应用五:Vue之ElementUI 表格Table与分页Pagination组件化
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 在平时的web项目开发过程中,列表分页查询展示应用的很频繁,为了便于阅读并减少代码的冗余,所 ...
- pagination实现分页功能
pagination.js: /** * pagination分页插件 */ ;(function($,window,document,undefined){ //配置参数 var defaults ...
- 分页功能的实现——Jdbc && JSP
@目录 什么是分页 ? 两个子模块功能的问题分析 和 解决方案 有条件查和无条件查询的影响 和 解决方案 项目案例: mysql + commons-dbutils+itcast-tools+Base ...
- 《JavaWeb从入门到改行》分页功能的实现
@目录 什么是分页 ? 两个子模块功能的问题分析 和 解决方案 有条件查和无条件查询的影响 和 解决方案 项目案例: mysql + commons-dbutils+itcast-tools+Base ...
- 原生js实现分页功能
原生就是实现分页功能 代码如下: var pagination = function(option,fun){ this.parentId = option.id; //容器 this.pageSiz ...
- 测试开发【提测平台】分享9-DBUntils优化数据连接&实现应用搜索和分页功能
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 从本期开始知识点讲以思维导图的形式给出,内容点会按照讲解-应用-展示的形式体现,这样会更清晰些. DBUntils连接池 在项目中链接数据 ...
- 【jQuery 分页】jQuery分页功能的实现
自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部 和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...
随机推荐
- 常见的3种Class级别的错误
ClassNotFoundException 很明显,这个错误是找不到类异常,即在当前classpath路径下找不到这个类. ClassNotFoundException继承了Exception,是必 ...
- matplotlib系列——线的属性
幕布视图:https://mubu.com/doc/alG8r_3iSw 参考文献:嵩天的Python课程讲义 示例(更多示例:matplotlib系列——折线图) 效果 颜色 线的风格 标记类型 ...
- sublime text 3安装Anaconda插件之后写python出现白框
sublime test 3安装anaconda插件之后写python代码会出现白框,这是应为anaconda自带了pep8语法检查, 有一些是语法错误,能够检查出来还是能有用的.但有一些不过是一些代 ...
- wireshark 识别http的标准
使用route add 本机ip 255.255.255.255 网关ip metric 1 的方式 会使访问本机ip的连接发送到局域网内,这样wireshark就可以抓取到 但有一点需要注意 如果本 ...
- mySQL查看存储过程、函数、视图、触发器
一.查看存储过程 1.show procedure status; //查看所有的 2.show create procedure proc_AllUser[proc_name]; 查看proc_Al ...
- System.Net.Mail.SmtpException:不允许使用邮箱名称.
使用SmtpClient发送邮件的时候,出现了如题错误. 解决方案: 将 SmtpClient.UseDefaultCredentials 属性设置为 true . 官方文档说明: Some SM ...
- wpf 查找控件
public List<T> GetChildObjects<T>(DependencyObject obj, Type typename) where T : Framewo ...
- 2018-8-29-win2d-渐变颜色
title author date CreateTime categories win2d 渐变颜色 lindexi 2018-08-29 08:58:14 +0800 2018-7-7 20:5:3 ...
- 力扣——candy (分糖果) python实现
题目描述: 中文: 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分. 你需要按照以下要求,帮助老师给这些孩子分发糖果: 每个孩子至少分配到 1 个糖果. ...
- java23种设计模式(一)-- 工厂模式、抽象工厂模式和单例模式
一.工厂模式 1.定义统一的接口,并在接口中定义要实现的抽象方法. 2.创建接口的具体实现类,并实现抽象方法. 3.创建一个工厂类,根据传递的参数,生成具体的实现类对象,执行具体的方法. 优点: 1. ...