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 其 ...
随机推荐
- 插件化框架解读之so 文件加载机制(四)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 提问 本文的结论是跟着 System.loadlibrary() ...
- viewport的深入调研
1.viewport概念:viewport就是设备的屏幕上能用来显示我们的网页的那一块区域. viewport的默认值980px或1024px等,以下是浏览器的默认viewport宽度 2.css中的 ...
- layui修改表格行高
.layui-table-cell { height: auto !important; white-space: normal; }
- windows开机自启mysql服务(任务计划程序+XAMPP)
需求:windows开机自启mysql服务 的需求: 相关工具:win10系统中,使用windows自带的任务计划程序 和 XAMPP软件 完成此需求 XAMPP软件介绍:此软件维护了windows中 ...
- 力扣 — Rotate List()
题目描述: 中文: 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = ...
- 使用IDEA实现品优购项目搭建
转发自 https://www.jianshu.com/p/4710a87b65fa 使用idea实现品优购项目搭建 1.使用idea实现品优购项目搭建 本篇文章只针对品优购第一天使用 IDEA 搭建 ...
- jQuery遍历之向上遍历
1.parent $(document).ready(function(){ $("a").parent().css({border:"4px solid black&q ...
- 1、Fiddler 打断点 bpu
一.fiddler 设置断点,可修改以下请求 可以修改HTTP请求头信息,如修改cookie,user-agent等 可以修改请求数据,突破表单限制,提交任意数字,如充值最大金额100,可修改为100 ...
- 简易的Master-Worker框架
Master-Worker模式是一种使用多线程进行数据处理的结构,多个worker进程协作处理用户请求,master进程负责维护worker进程,并整合最终处理结果 主要参与者 Worker:用于实际 ...
- 常用Concurrent.util包工具类——高并发
一 Concurrent.util常用类: 1. CyclicBarrier: 假设有场景:每个线程代表一个跑步运动员,当运动员都准备好后,才一起出发只要有一个人没有准备好,大家都等待. import ...