Vue3.x+Element Plus仿制Acro Design简洁模式分页器组件
Vue3.x+Element Plus仿制Acro Design简洁模式分页器组件
-
开发中难免会遇到宽度很窄的列表需要使用分页器的情况,这时若使用
Element Plus组件的分页器会导致分页器内容超出展示的区域,而Element Plus组件中目前没有Acro Design那样小巧的分页器(Arco Design Vue)如下图所示,如果再引入一个新的UI组件库未免导致项目臃肿,所以基于Vue3.x和Element Plus封装了一个即拿即用的”简洁模式“分页器组件以便不时之需

-
分页器组件代码部分:
<!-- (简洁模式)分页器组件 -->
<template><div class="smallpagination"><!-- 总数统计 --><span>{{ '共' + total + '条' }}</span><!-- 翻页 --><div class="smallpagination-pager"><!-- 左翻页 --><el-icon @click="pageTurning('down')" :class="curPage <= 1 ? 'forbid-pageturning' : ''"><ArrowLeft /></el-icon><!-- 页码 --><el-input-number @change="handlePageChange" v-model="pageNum" :min="1" :max="pageTotal" :step-strictly="true":controls="false" /><b>{{ '/ ' + pageTotal }}</b><!-- 右翻页 --><el-icon @click="pageTurning('up')" :class="curPage >= pageTotal ? 'forbid-pageturning' : ''"><ArrowRight /></el-icon></div></div>
</template><script setup>
import { useAttrs, computed, ref } from 'vue';
import {ArrowLeft,ArrowRight
} from '@element-plus/icons-vue';// 接收父组件参数
const attrs = useAttrs();
// 父组件事件
const em = defineEmits(['handlePageChange']);
// 当前页
const pageNum = ref(1);
// 父组件传递-当前页码
const curPage = computed(() => {pageNum.value = attrs.curPage;return attrs.curPage;
});
// 父组件传递-总数
const total = computed(() => {return attrs.total;
});
// 总页码数
const pageTotal = computed(() => {return attrs.total > 0 ? Math.ceil(attrs.total / attrs.pageSize) : 1;
});/* 改变页码 */
const handlePageChange = (e) => {if (pageTotal.value <= 1) {return;}em('handlePageChange', e);
};
/* 翻页 */
const pageTurning = (type) => {// 向前翻页if (type === 'up') {if (curPage.value >= pageTotal.value || pageTotal.value <= 1) {return;}em('handlePageChange', pageNum.value + 1);}// 向后翻页else {if (pageTotal.value <= 1 || curPage.value <= 1) {return;}em('handlePageChange', pageNum.value - 1);}
};
</script><style lang="less" scoped>
.smallpagination {width: auto;height: 100%;display: flex;align-items: center;>span {margin-right: 11px;font-size: 14px;font-weight: 400;color: #4E5969;line-height: 21px;}.smallpagination-pager {display: flex;align-items: center;.el-icon {width: 30px;height: 30px;font-size: 14px;color: #4E5969;cursor: pointer;&:hover {background: rgb(247, 248, 250);color: #0082ff;}}.forbid-pageturning {opacity: 0.4;cursor: not-allowed;&:active {color: #4E5969;background: rgb(255, 255, 255);}}>b {margin: 0 5px;font-size: 14px;font-weight: 400;color: #4E5969;}}
}
</style>
<style lang="less">
.smallpagination {.smallpagination-pager {.el-input-number {width: 40px;margin-left: 5px;span {display: none;}.el-input__wrapper {padding: 0;height: 30px;font-size: 14px;box-sizing: border-box;background: #f2f3f5;box-shadow: none !important;}}}
}
</style>
- 使用简洁模式分页器组件代码如下:
<template><div class="xxx-list">...<div class="list-bottom-common-page"><SmallPagination :total="total" :curPage="curPage" :pageSize="pageSize" @handlePageChange="handleCurrentChange"></SmallPagination></div></div>
</template><script setup>
import SmallPagination from '@/components/xxx/SmallPagination.vue';
import { ref } from 'vue';// 当前页
const curPage = ref(1);
// 每页条数
const pageSize = ref(20);
// 列表总数
const total = ref(0);/* 当前页改变 */
const handleCurrentChange = (val) => {curPage.value = val;...
};
</script>
- 最终效果如下:

相关文章:
Vue3.x+Element Plus仿制Acro Design简洁模式分页器组件
Vue3.xElement Plus仿制Acro Design简洁模式分页器组件 开发中难免会遇到宽度很窄的列表需要使用分页器的情况,这时若使用Element Plus组件的分页器会导致分页器内容超出展示的区域,而Element Plus组件中目前没有Acro Design那样小巧的分页器(…...
经典文献阅读之--VoxelMap(体素激光里程计)
0. 简介 作为激光里程计,常用的方法一般是特征点法或者体素法,最近Mars实验室发表了一篇文章《Efficient and Probabilistic Adaptive Voxel Mapping for Accurate Online LiDAR Odometry》,同时还开源了代码在Github上。文中为雷达里程计提…...
.NET6中使用GRPC详细描述
Supported languages | gRPC,官网。至于原理就不说了,可以百度原理之后,然后再结合代码,事半功倍,就能很好理解GRPC了。 目录 一、简单使用 二、实际应用 一、简单使用 1.使用vs2022创建一个grpc程序,…...
ML@矩阵微积分基础
文章目录矩阵微积分Matrix calculus记法简单Jacobi Matrix分子记法分母记法一般形式的Jacobi MatrixTypes of matrix derivative向量求导向量对标量求导标量对向量求导向量对向量求导矩阵求导矩阵对标量求导(切矩阵)标量对矩阵求导记法向量求导 向量对标量求导标量对向量求导向…...
华为OD机试真题Python实现【优秀学员统计】真题+解题思路+代码(20222023)
优秀学员统计 题目 公司某部门软件教导团正在组织新员工每日打卡学习活动,他们开展这项学习活动已经一个月了,所以想统计下这个月优秀的打卡员工。每个员工会对应一个 id,每天的打卡记录记录当天打卡员工的 id 集合,一共 30 天。 请你实现代码帮助统计出打卡次数 top5 的…...
docsify在线文档支持pdf查看
目录 步骤一:添加插件 步骤二:添加pdf地址 步骤三:成果展示 docsify是一个在github上很好用的文档转换网页的工具,但是大部分情况我们都是使用的markdown文件。最近想把pdf文档也能支持在这上面展示,研究后总结一下…...
ES6中Set类型的基本使用
在ES6之前,存储数据的结构主要有两种:数组、对象。 在ES6中新增了另外两种数据结构(存放数据的方式):Set、Map,以及他们的另外形式WeakSet、WeakMap。 Set的基本使用 Set是一个新增的数据结构,…...
【VUE3.0_CSS功能】
CSS功能组件css作用域深度选择器(标签名空格:deep(标签名))插槽选择器(:soltted(标签名))全局选择器(:global(类名))动态CSS(v-bind)useCSSModule拓展知识:deep的写法组件…...
微机原理复习总结6:汇编语言程序设计
本篇博客主要分享几道汇编语言例题编写一完整的程序,从键盘输入一组字符,直到输入“0”为止,当输入是小写字母时,则修改为大写字母,输入的字符存放在string为首址的存储单元中。data segment ;数据段定义 st…...
计算机网络 部分原理和过程
下面是一台计算机 Ping 和不在同一 IP 网络上的另一台计算机的全过程: 该计算机首先确定要 Ping 的目标 IP 地址,并检查该 IP 地址是否与本地 IP 地址在同一 IP 网络上。如果目标 IP 地址与本地 IP 地址不在同一 IP 网络上,则需要通过路由器…...
C++实现链表
C实现链表 众所周知,C/C语言实现的链表是由一个一个的结点构成,每个结点分为数据域和指针域,指针域中存储了其后继结点的地址,通过地址来访问下一个结点。 链表是一系列节点串联形成的数据结构,链表存储有序的元素集合…...
MySQL索引篇
文章目录说明:索引篇一、索引常见面试题按数据结构按物理存储分类按字段特性分类按字段个数分类索引缺点:什么时候适用索引?什么时候不需要创建索引?常见优化索引的方法:发生索引失效的情况:二、从数据页角…...
Ardiuno-交通灯
LED交通灯实验实验器件:■ 红色LED灯:1 个■ 黄色LED灯:1 个■ 绿色LED灯:1 个■ 220欧电阻:3 个■ 面包板:1 个■ 多彩杜邦线:若干实验连线1.将3个发光二极管插入面包板,2.用杜邦线…...
Leetcode.1234 替换子串得到平衡字符串
题目链接 Leetcode.1234 替换子串得到平衡字符串 Rating : 1878 题目描述 有一个只含有 Q, W, E, R四种字符,且长度为 n 的字符串。 假如在该字符串中,这四个字符都恰好出现 n/4次,那么它就是一个「平衡字符串」。 给你一个这样…...
聚类算法之K-means算法详解
文章目录 什么是聚类k-means算法简介牧师-村民模型算法步骤伪代码流程描述手动实现优缺点优点缺点算法调优与改进数据预处理合理选择 K 值手肘法Gap Statistic(间隔统计量)轮廓系数法(Silhouette Coefficient)Canopy算法拍脑袋法采用核函数K-means++ISODATA参考文献<...
电话呼入/呼出CSFB流程介绍
MO CSFB 注册的LAI跟SYS_INFO不同会触发LU流程;LU流程结束后,判断LOCATION UPDATING ACCEPT消息中的"Follow-on proceed"参数状态。(1)如果IE消息中有"Follow-on proceed",终端直接发送CM Service Request; (2)如果IE消息中没有"Follow-on procee…...
【比赛合集】9场可报名的「创新应用」、「程序设计」大奖赛,任君挑选!
CompHub 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…)比赛。本账号同时会推送最新的比赛消息,欢迎关注!更多比赛信息见 CompHub主页 或 点击文末阅读原文以下信息仅供参考,以比赛官网为准目录创新应用赛&…...
剑指 Offer 27. 二叉树的镜像
剑指 Offer 27. 二叉树的镜像 难度:easy\color{Green}{easy}easy 题目描述 请完成一个函数,输入一个二叉树,该函数输出它的镜像。 例如输入: 镜像输出: 示例 1: 输入:root [4,2,7,1,3,…...
RPC编程:RPC概述和架构演变
RPC编程系列文章第一篇一:引言1:本系列文章的目标2:RPC的概念二:架构的演变过程1:单体架构1):概念2):特点3):优缺点2:单体架构水平扩展1):水平拓展的含义2)&a…...
神经网络训练时只对指定的边更新参数
在神经网络中,通常采用反向传播算法来计算网络中各个参数的梯度,从而进行参数更新。在反向传播过程中,所有的参数都会被更新。因此,如果想要只更新指定的边,需要采用特殊的方法。 一种可能的方法是使用掩码࿰…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
