element-ui封装分页组件:实现首页、上一页、下一页、末页、跳转按钮

在这里插入图片描述

首页、上一页、下一页、末页、跳转按钮

  1. 因为el-pagination只有一个插槽,所以通过两个el-pagination插槽分别加入首页、末页按钮,再拼接这两个el-pagination的方式来实现首页、末页按钮
  2. 跳转按钮不用加事件,如果el-pagination修改了前往的页数,失焦时会触发current-change事件,造成了一种似乎是点击按钮跳转的效果(实际上点击其他地方失焦也会触发current-change事件)
<template><div class="pagination"><el-paginationprev-text="上一页"next-text="下一页"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="tableParams.pageNum":page-sizes="[20, 30, 40]":page-size="tableParams.pageSize"layout="total, sizes, slot, prev, pager, next":total="tableParams.total"><buttontype="button"class="btn-prev"@click="jumpFirstPage":disabled="isFirstPage"><span>首页</span></button></el-pagination><el-paginationprev-text="上一页"next-text="下一页"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="tableParams.pageNum":page-sizes="[20, 30, 40]":page-size="tableParams.pageSize"layout="slot, jumper":total="tableParams.total"><buttontype="button"class="btn-prev"@click="jumpLastPage":disabled="isLastPage"><span>末页</span></button></el-pagination><el-buttontype="primary"size="mini"class="ml">前往</el-button></div>
</template>
<script>
export default {props: {tableParams: {type: Object,},},computed: {isFirstPage() {// 如果只有1页,禁用首页return this.tableParams.pageNum === 1;},isLastPage() {return (// 如果只有1页,禁用末页,或者已经处于末页,禁用Math.ceil(this.tableParams.total / this.tableParams.pageSize) === 0 ||this.tableParams.pageNum ===Math.ceil(this.tableParams.total / this.tableParams.pageSize));},},methods: {handleSizeChange(val) {this.$emit('size-change', val);},handleCurrentChange(val) {this.$emit('current-change', val);},jumpFirstPage() {this.handleCurrentChange(1);},jumpLastPage() {this.handleCurrentChange(Math.ceil(this.tableParams.total / this.tableParams.pageSize));},},
};
</script>
<style lang="scss" scoped>
.pagination {padding: 6px;border: 1px solid #c0eae7;border-top: 0px;display: flex;justify-content: flex-end;align-items: center;border-radius: 4px;border-top-left-radius: 0px;border-top-right-radius: 0px;
}
:deep(.el-button--mini) {padding: 5px 15px;height: 24.22px;margin-left: 10px;
}
</style>

使用

   <Pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":tableParams="tableParams"></Pagination>

组件默认pageNum 从1开始,如果接口是从0开始,传参时-1即可

 tableParams: {pageNum: 1,pageSize: 30,total: 0,},
  handleSizeChange(val) {// 条数变更后如果pageNum不变可能会导致查询为空,所以还原为1this.tableParams.pageNum = 1;this.tableParams.pageSize = val;this.getTableData();},handleCurrentChange(val) {this.tableParams.pageNum = val;this.getTableData();},
 async getTableData() {this.tableData = [];this.tableLoading++;const { data: res } = await http({method: 'get',url: '/show/listData',data: {},params: {pageIndex: this.tableParams.pageNum,pageSize: this.tableParams.pageSize,},});if (res.code === 0) {this.tableData = res.data;this.tableParams.total = res.total;}this.tableLoading--;},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/43924.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【work】AI八股-神经网络相关

Deep-Learning-Interview-Book/docs/深度学习.md at master amusi/Deep-Learning-Interview-Book GitHub 网上相关总结&#xff1a; 小菜鸡写一写基础深度学习的问题&#xff08;复制大佬的&#xff0c;自己复习用&#xff09; - 知乎 (zhihu.com) CV面试问题准备持续更新贴 …

VOI(Virtual Operating System Infrastructure,虚拟操作系统基础架构)

VOI&#xff08;Virtual Operating System Infrastructure&#xff0c;虚拟操作系统基础架构&#xff09;架构在桌面虚拟化领域具有其独特的优势&#xff0c;使得它在某些场景下表现尤为出色。以下是几个具体场景&#xff1a; 1. 重载性能需求场景 表现&#xff1a; 高效利用…

聚类分析方法(二)

目录 三、层次聚类方法&#xff08;一&#xff09;层次聚类策略&#xff08;二&#xff09;AGNES算法&#xff08;三&#xff09;DIANA算法 四、密度聚类方法&#xff08;一&#xff09;基本概念&#xff08;二&#xff09;算法描述&#xff08;三&#xff09;计算实例&#xf…

Google账号输入用户名和密码后提醒要到手机通知点是,还要点击数字,但是我手机收不到

有一些朋友换了一个新的电脑后手机登录谷歌账号时&#xff0c;用户名和密码都正确输入以后&#xff0c;第三步弹出一个提示&#xff0c;要在手机上的通知栏点击是&#xff0c;并且点击手机上相应的数字才能继续登录。 但是自己的手机上下拉通知栏却没有来自谷歌的通知&#xf…

ADOQuery 查询MSSQL存储过程一个莫名其妙的错误;

在 SSMS 中执行完成正常的的存储过程。 也能正常的返回想要的数据&#xff0c;&#xff0c;然后通过 ADO 查询时&#xff0c;总是提法 某 字段不存在的问题&#xff1b; 此问题困扰了一天。 例如&#xff08;当然&#xff0c;实际数据结构比下面举例的复杂&#xff09;&…

C++八股(二)之C++11新特性

一、C++11有什么新特性?⭐ 自动类型推导(Type Inference):引入了 auto 关键字,允许编译器根据初始化表达式的类型自动推导变量的类型。统一的初始化语法(Uniform Initialization Syntax):引入了用花括号 {} 进行初始化的统一语法,可以用于初始化各种类型的对象,包括基…

符号同步、定时同步和载波同步

符号同步、定时同步和载波同步是通信系统中重要的同步技术&#xff0c;它们各自承担着不同的功能和作用。以下是对这三种同步技术的详细解释&#xff1a; 符号同步 定义&#xff1a; 符号同步&#xff0c;也称为定时恢复或时钟恢复&#xff0c;是指在数字通信系统中&#xff…

继承关系中的访问控制

继承关系中的访问控制 类中成员的访问权限类继承中的访问权限派生类向基类转换的权限问题&#xff08;向上转型&#xff09;友元在继承中的访问权限 类中成员的访问权限 public&#xff1a;类的对象&#xff08;外部&#xff09;可以访问&#xff0c;派生类也可以访问protecte…

LeNet原理及代码实现

目录 1.原理及介绍 2.代码实现 2.1model.py 2.2model_train.py 2.3model.test.py 1.原理及介绍 2.代码实现 2.1model.py import torch from torch import nn from torchsummary import summaryclass LeNet(nn.Module):def __init__(self):super(LeNet, self).__init__…

nuxt、vue树形图d3.js

直接上代码 //安装 npm i d3 --save<template><div class"d3"><div :id"id" class"d3-content"></div></div> </template> <script> import * as d3 from "d3";export default {props: {d…

Github Actions 构建Vue3 + Vite项目

本篇文章以自己创建的项目为例&#xff0c;用Github Actions构建。 Github地址&#xff1a;https://github.com/ling08140814/myCarousel 访问地址&#xff1a;https://ling08140814.github.io/myCarousel/ 具体步骤&#xff1a; 1、创建一个Vue3的项目&#xff0c;并完成代…

接口基础知识1:认识接口

课程大纲 一、定义 接口&#xff1a;外部与系统之间、内部各子系统之间的交互点。 比如日常使用的电脑&#xff0c;有电源接口、usb接口、耳机接口、显示器接口等&#xff0c;分别可以实现&#xff1a;与外部的充电、文件数据传输、声音输入输出、图像输入输出等功能。 接口的本…

262个地级市-市场潜力指数(do文件+原始文件)

全国262个地级市-市场潜力指数&#xff08;市场潜力计算方法代码数据&#xff09;_市场潜力数据分析资源-CSDN文库 市场潜力指数&#xff1a;洞察未来发展的指南针 市场潜力指数是一个综合性的评估工具&#xff0c;它通过深入分析市场需求、竞争环境、政策支持和技术创新等多个…

面向字节流传输数据

当提到“传输数据面向字节流”&#xff0c;这是指在网络通信中&#xff0c;数据被视作一连串的无结构字节&#xff0c;而不是按照特定的数据块或记录进行传输。这种传输方式是面向传输层协议&#xff08;如TCP&#xff09;的一个特性&#xff0c;它允许数据以连续的字节流形式在…

phpstudy框架,window平台,如何开端口给局域网访问?

Windows平台上使用phpstudy框架开端口给同事访问&#xff0c;主要涉及到几个步骤&#xff1a;查看并确认本机IP地址、配置phpstudy及网站项目、开放防火墙端口以及确保同事能够通过局域网访问。以下是详细的步骤说明&#xff1a; 1. 查看并确认本机IP地址 首先&#xff0c;需…

SQLAlchemy pool_pre_ping

pool_pre_ping 是 SQLAlchemy 中 create_engine 函数的一个参数&#xff0c;它用于配置连接池的行为。当设置为 True 时&#xff0c;pool_pre_ping 启用了连接池在每次从池中取出&#xff08;即“签出”或“checkout”&#xff09;连接之前&#xff0c;先测试该连接是否仍然活跃…

(2)滑动窗口算法练习:无重复字符的最长子串

无重复字符的最长子串 题目链接&#xff1a;3. 无重复字符的最长子串 - 力扣&#xff08;LeetCode&#xff09; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的最长子串的长度。 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是"a…

mov视频怎么改成mp4?把mov改成MP4的四个方法

mov视频怎么改成mp4&#xff1f;选择合适的视频格式对于确保内容质量和流通性至关重要。尽管苹果公司的mov格式因其出色的视频表现备受赞誉&#xff0c;但在某些情况下&#xff0c;它并非最佳选择&#xff0c;因为使用mov格式可能面临一些挑战。MP4格式在各种设备&#xff08;如…

构造二进制字符串

目录 LeetCode3221 生成不含相邻零的二进制字符串 #include <iostream> #include <vector> using namespace std;void dfs(string s,int n,vector<string>& res){if(s.size()n){res.push_back(s);return;}dfs(s"0",n,res);dfs(s"1"…

使用redis进行短信登录验证(验证码打印在控制台)

使用redis进行短信登录验证 一、流程1. 总体流程图2. 流程文字讲解&#xff1a;3.代码3.1 UserServiceImpl&#xff1a;&#xff08;难点&#xff09;3.2 拦截器LoginInterceptor&#xff1a;3.3 拦截器配置类&#xff1a; 4 功能实现&#xff0c;成功存入redis &#xff08;黑…