当前位置: 首页 > news >正文

基于vue+element 分页的封装

目录标题

  • 项目场景:
  • 认识分页
    • 1.current-page
    • 2.page-sizes
    • 3.page-size
    • 4.layout
    • 5.total
    • 6.size-change
    • 7.current-change
  • 封装分页:
    • 创建paging:
    • 进行封装
  • 页面中使用:
    • 引入
    • 效果

项目场景:

分页也是我们在实际应用当中非常常见的存在,其实分页本身在element中做的就挺好的了,但是使用确实非常的多,所以还是有必要封装一下,主要是为了减少代码的冗余,以及提升开发的效率和降低后续维护的成本。


认识分页

这是一段普通分页的示例

<template><div class="block"><span class="demonstration">完整功能</span><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div>
</template><script>export default {methods: {handleSizeChange(val) {console.log(`每页 ${val}`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}},data() {return {currentPage: 4};}}
</script>

效果是这样的

在这里插入图片描述
在这当中用到了我们常用的七个字段:

1.current-page

:current-page="currentPage"

代表的是当前在第几页,并且可以输入进行跳转任意存在的页数,主要效果如下:
在这里插入图片描述

2.page-sizes

:page-sizes="[100, 200, 300, 400]"

用于设置分页每页显示多少条,主要效果如下:
在这里插入图片描述

3.page-size

:page-size="100"

设置默认显示多少条(这里默认为100条),主要效果如下:
在这里插入图片描述

4.layout

layout="total, sizes, prev, pager, next, jumper"

用于设置组件布局,子组件名用逗号分隔,效果如下:
在这里插入图片描述
字段说明:

  • total : 总页数
  • sizes:一页显示多少条
  • prev:上一页
  • pager:点击页数跳转(只允许跳转上下两页以及起止页)
  • next:下一页
  • jumper:输入跳转任意存在页

5.total

:total="400"

展示总页数,效果如下。
在这里插入图片描述

6.size-change

@size-change="handleSizeChange"

触发事件,当page-size改变时触发,也就是当页面改变时触发。
在这里插入图片描述

7.current-change

@current-change="handleCurrentChange"

触发事件,currentPage 改变时会触发,也就是修改每页显示多少条时触发。


封装分页:

弄清楚每个字段的意思后便可以进行封装了。
主要思路是,封装的组件通过父组件将currentPage,total,sizes,pager,jumper传入,并且在触发@size-change,@current-change事件时,将事件信息传给父组件。

创建paging:

在这里插入图片描述

进行封装

<!-- author:Wh1T3ZzTcomponent:分页time:2023/07/25
-->
<template><div class="paging"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="pageSizes":page-size="pageSize":layout="layout":total="total"></el-pagination></div>
</template><script>
export default {data(){return{}},props:{currentPage:{default(){return [];}},pageSizes:{default(){return [];}},pageSize:{default(){return [];}},layout:{default(){return [];}},total:{default(){return [];}}},methods:{handleSizeChange(val) {this.$emit('handleSizeChange',val)console.log(`传给父组件:每页 ${val}`);},handleCurrentChange(val) {this.$emit('handleCurrentChange',val)console.log(`传给父组件:当前页: ${val}`);},}
}
</script><style></style>

封装完成!


页面中使用:

引入

<template><div><Paging :currentPage="1" :pageSizes="[5,10,20,50,100]" :pageSize="10" layout="total, sizes, prev, pager, next, jumper" :total="10" @handleSizeChange="PagingSizeChange" @handleCurrentChange="PagingCurrentChange"></Paging></div>
</template><script>
import Paging from '@/components/paging/index.vue'
export default {methods:{PagingSizeChange(val){console.log(`父组件接收到每页: ${val}`);},PagingCurrentChange(val){console.log(`父组件接收到当前页: ${val}`);},}
}</script>

效果

在这里插入图片描述

在这里插入图片描述
成功!

相关文章:

基于vue+element 分页的封装

目录标题 项目场景&#xff1a;认识分页1.current-page2.page-sizes3.page-size4.layout5.total6.size-change7.current-change 封装分页&#xff1a;创建paging&#xff1a;进行封装 页面中使用&#xff1a;引入效果 项目场景&#xff1a; 分页也是我们在实际应用当中非常常见…...

面试题模拟

C# 装箱和拆箱是什么&#xff1f; 装箱是指用堆空间来存放值类型数据 拆箱是指将存放在堆空间的值类型数据转换到栈空间 值和引用类型在变量赋值时的区别是什么&#xff1f; 值类型的数据赋值的时候是指向同一块内存区域&#xff0c;当前一个改变的时候后一个也会跟着改变。 引…...

Linux6.13 Docker LNMP项目搭建

文章目录 计算机系统5G云计算第四章 LINUX Docker LNMP项目搭建一、项目环境1.环境描述2.容器ip地址规划3.任务需求 二、部署过程1.部署构建 nginx 镜像2.部署构建 mysql 镜像3.部署构建 php 镜像4.验证测试 计算机系统 5G云计算 第四章 LINUX Docker LNMP项目搭建 一、项目…...

数据包协议栈处理

看了两个不错的帖子&#xff0c;记录一下。 ​​​​​​​4.2 TCP Segmentation Offload(TSO)_Remy的学习记录-CSDN博客_tcp-segmentation-offload Linux内核参数之rp_filter - 萝卜1992 - 博客园...

html刷新图片

文章目录 前言网页整体刷新改变图像的url 备注 前言 海思3516的一个开发板&#xff0c;不断的采集图像编码为jpeg&#xff0c;保存为同一个文件。打算用网页实现查看视频的效果&#xff0c;需要前端能够自动刷新。 目前找到了两个方法&#xff0c;一个是网页的不断刷新&#…...

PHP反序列化漏洞之魔术方法

一、魔术方法 PHP魔术方法&#xff08;Magic Methods&#xff09;是一组特殊的方法&#xff0c;它们在特定的情况下会被自动调用&#xff0c;用于实现对象的特殊行为或提供额外功能。这些方法的名称都以双下划线开头和结尾&#xff0c;例如: __construct()、__toString()等。 …...

2023年的深度学习入门指南(20) - LLaMA 2模型解析

2023年的深度学习入门指南(20) - LLaMA 2模型解析 上一节我们把LLaMA 2的生成过程以及封装的过程的代码简单介绍了下。还差LLaMA 2的模型部分没有介绍。这一节我们就来介绍下LLaMA 2的模型部分。 这一部分需要一些深度神经网络的基础知识&#xff0c;不懂的话不用着急&#xf…...

智能安全配电装置应用场景有哪些?

安科瑞 华楠 一、应用背景 电力作为一种清洁能源&#xff0c;给人们带来了舒适、便捷的电气化生活。与此同时&#xff0c;由于使用不当&#xff0c;维护不及时等原因引发的漏电触电和电气火灾事故&#xff0c;也给人们的生命和财产带来了巨大的威胁和损失。 为了防止低压配电…...

Rust vs Go:常用语法对比(四)

题图来自 Go vs. Rust performance comparison: The basics 61. Get current date 获取当前时间 package mainimport ( "fmt" "time")func main() { d : time.Now() fmt.Println("Now is", d) // The Playground has a special sandbox, so you …...

c++ 派生类 文本查询程序再探

Query_base类和Query类 //这是一个抽象基类&#xff0c;具体的查询类型从中派生&#xff0c;所有成员都是private的 class Query_base {friend class Query;protected:using line_no TextQuery::line_no;//用于level函数virtual ~Query_base() default;private://eval返回与…...

17. 电话号码的字母组合

题目描述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits "23" …...

Redis 基础知识和核心概念解析:理解 Redis 的键值操作和过期策略

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…...

Jenkins中sh函数的用法

在Jenkins的Pipeline中&#xff0c;sh函数的用法 用法一 单个命令字符串包括使用&#xff0c;示例如下&#xff1a; sh echo "Hello, Jenkins!"用法二 多个命令字符串包括命令列表使用&#xff0c;示例如下&#xff1a; sh echo "Step 1" echo "…...

Android 之 Canvas API 详解 (Part 3) Matrix 和 drawBitmapMesh

本节引言&#xff1a; 在Canvas的API文档中&#xff0c;我们看到这样一个方法&#xff1a;drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint) 这个Matrix可是有大文章的&#xff0c;前面我们在学Paint的API中的ColorFilter中曾讲过ColorMatrix 颜色矩阵&#xff0c;一个4…...

基于Ubuntu 22.04 编译chip-tool工具

前言 编译过程有点曲折&#xff0c;做下记录&#xff0c;过程中&#xff0c;有参考别人写的博客&#xff0c;也看github 官方介绍&#xff0c;终于跑通了~ 环境说明&#xff1a; 首先需要稳定的梯子&#xff0c;可以访问“外网”ubuntu 环境&#xff0c;最终成功实验在Ubunt…...

opencv-17 脸部打码及解码

使用掩模和按位运算方式实现的对脸部打码、解码实例 代码如下&#xff1a; import cv2 import numpy as np #读取原始载体图像 lenacv2.imread("lena.png",0) #读取原始载体图像的 shape 值 r,clena.shape masknp.zeros((r,c),dtypenp.uint8) mask[220:400,250:350…...

JVM分享

JVM分享 官网&#xff1a;https://docs.oracle.com/javase/specs/jvms/se8/html/index.html Java代码的执行流程 我们编写完之后的java文件如果要运行&#xff0c;java文件会编译成class文件&#xff0c;在jvm中运行时ClassLoader会加载class文件&#xff0c;加载进来之后&a…...

Apache Dubbo CVE-2021-36162 挖掘过程

01 漏洞背景 发现该漏洞的起因是在分析 CVE-2021-30181 的脚本注入补丁的时候&#xff0c;意外发现了几个已被修复的 yaml 反序列化漏洞&#xff0c;还以为是未公开的Nday&#xff0c;查询后发现其实对应的是 CVE-2021-30180 漏洞的修复代码。通过查看补丁可以知道&#xff0c…...

开源框架面试题目整理

目录 SpringIOC SpringAOP Spring的生命周期 Spring Bean作用域 Spring Bean作用域并发安全 Spring循环依赖...

Mr. Cappuccino的第52杯咖啡——Mybatis环境搭建与使用

Mybatis环境搭建与使用 Mybatis介绍Mybatis环境搭建与使用基于XML方式-原生方式开发创建数据库表项目准备项目结构项目代码实体类中添加有参构造方法产生的问题 基于XML方式-mapper代理开发项目准备项目结构项目代码SQL映射文件中namespace未设置为接口全限定名产生的问题 基于…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...