vue 快速自定义分页el-pagination

vue 快速自定义分页el-pagination

在这里插入图片描述

  • template
<div style="text-align: center">
          <el-pagination
            background
            :current-page="pageObj.currentPage"
            :page-size="pageObj.page"
            :page-sizes="pageObj.pageSize"
            layout="total,prev, pager, next, sizes"
            :total="pageObj.total"
            prev-text="上一页"
            next-text="下一页"
            @current-change="currentChange"
            @size-change="sizeChange"
          >
          </el-pagination>
        </div>
  • data
pageObj: {
        currentPage: 1,
        pageSizes: [10, 20, 30, 40],
        size: 10,
        total: 1000,
},
  • method
handleSizeChange(val) {
    console.log(`每页 ${val}`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  }
  • css
::v-deep .el-pagination .btn-prev {
  background-color: #1f3c77;
  color: #fff;
  padding: 0 10px;
}
::v-deep .el-pagination .btn-next {
  background-color: #1f3c77;
  color: #fff;
  padding: 0 10px;
}
::v-deep .el-pagination .el-pager li:not(.disabled).active {
  background-color: #457ae6;
}
::v-deep .el-pagination .el-pagination__total {
  color: #fff;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner {
  color: #fff;
}
::v-deep .el-pagination .el-pager li.number {
  background-color: #1f3c77;
  color: #fff;
}
::v-deep .el-pagination .el-pager .btn-quicknext {
  background-color: #1f3c77;
  color: #fff;
}
::v-deep .el-pagination .el-pager .btn-quickprev {
  background-color: #1f3c77;
  color: #fff;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nginx最佳实践优化(动静分离、资源压缩、负载均衡、黑白名单等等)

一、前言 Nginx是目前负载均衡技术中的主流方案&#xff0c;几乎绝大部分项目都会使用它&#xff0c;Nginx是一个轻量级的高性能HTTP反向代理服务器&#xff0c;同时它也是一个通用类型的代理服务器&#xff0c;支持绝大部分协议&#xff0c;如TCP、UDP、SMTP、HTTPS等。 二、…

“云上新气象”,VDI+IDV混合部署,麒麟信安云正式上线某市气象局!

阴晴冷暖&#xff0c;风云变幻&#xff0c;气象与人们的生活密切相关&#xff0c;气象局信息系统的智慧高效运营对于提升灾害防御能力、城市气象观测等方面具有重要作用&#xff0c;随着气象业务范围的不断扩展&#xff0c;气象局的信息化建设与数字化转型也亟需提上日程。 走…

【计算机网络 02】物理层基本概念 传输媒体 传输方式 编码与调制 信道极限容量 章节小结

第二章 -- 物理层 2.1 物理层基本概念2.2 物理层下的传输媒体2.3 传输方式2.4 编码与调制2.5 信道极限容量2.6 章节小结 2.1 物理层基本概念 2.2 物理层下的传输媒体 传输媒体也称为传输介质或传输媒介&#xff0c;他就是数据传输系统中在发送器和接收器之间的物理通路 传输媒…

微信小程序quickstartFunctions中云函数的应用

1、在quickstartFunctions文件中新建文件夹和文件 2、index.js 文件书写 const cloud require(wx-server-sdk);cloud.init({env: cloud.DYNAMIC_CURRENT_ENV }); const db cloud.database();// 链表查询试卷和对应的题库 exports.main async (event, context) > {retu…

矩阵置零(力扣)思维 JAVA

给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]] 输入&#xff1a;matrix [[0,1,2,0],[3,4,5,2],[…

架空线接地故障测试仪

一、凯迪正大架空线路接地故障定位仪产品概述 KDJK-10A只能在线路发生故障停运后进行故障定位&#xff0c;由发射机向故障线路施加高压将故障复现&#xff0c;超低频电流由发射机流向故障点&#xff0c;经过渡电阻进入大地并流回发射机&#xff1b;在线路沿线&#xff0c;将传…

算法的时间复杂度与空间复杂度

文章目录 1.算法效率 2.时间复杂度 3.空间复杂度 4.复杂度oj题目 文章内容 1.算法效率 1.1 如何衡量一个算法的好坏 一辆车的好坏我们可以从价格&#xff0c;油耗...... 方面来衡量&#xff0c;但衡量一个算法的好坏我们该从哪一个方面入手呢&#xff1f;比如斐波那契数…

在Springboot集成Activiti工作流引擎-引入、调用,测试【基础讲解】

工作流 通过计算机对业务流程自动化执行管理 他主要解决的是使在多个参与者之间按照某种“预定义规则”自动进行传递稳定 信息或任务的过程 通俗来讲 业务上一个玩着的审批流程 比如请假&#xff0c;出差 外出采购等 工作流引擎就是来解决流程问题的 提高我们的工作效率 如果…

【开源项目】低代码数据可视化开发平台-Datav

Datav 基本介绍 Datav是一个Vue3搭建的低代码数据可视化开发平台&#xff0c;将图表或页面元素封装为基础组件&#xff0c;无需编写代码即可完成业务需求。 它的技术栈为&#xff1a;Vue3 TypeScript4 Vite2 ECharts5 Axios Pinia2 在线预览 账号: admin 密码: 123123预…

【VB6|第21期】检查SqlServer数据库置疑损坏的小工具(含源码)

日期&#xff1a;2023年7月25日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

《MySQL45讲》笔记—事务隔离

事务 事务就是保证一组数据库操作&#xff0c;要么全部成功&#xff0c;要么全部失败。 原子性 一个事务中的所有操作&#xff0c;要么全部完成&#xff0c;要么全部不完成&#xff0c;不会结束在中间某个环节&#xff0c;而且事务在执行过程中发生错误&#xff0c;会被回滚…

区间预测 | MATLAB实现QRGRU门控循环单元分位数回归多输入单输出区间预测

区间预测 | MATLAB实现QRGRU门控循环单元分位数回归时间序列区间预测 目录 区间预测 | MATLAB实现QRGRU门控循环单元分位数回归时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 MATLAB实现QRGRU门控循环单元分位数回归分位数回归多输入单输出区间…

Docker 容器高级操作

Docker容器高级操作 Docker容器创建、停止、启动、删除等基础操作上篇已述,然Docker容器被广大开发者青睐,不可能只有如此简单的功能,必有高阶功法。那么接下来 让我们一同走进容器操作的高级篇,领略其高级操作的魅力。 查看容器 docker ps -a | grep tomcat [root@tudou…

qt6.5 download for kali/ubuntu ,windows (以及配置选项选择)

download and sign in qt官网 sign in onlion Install 1 2 3 4 5

Redis服务优化

目录 一.Rde高可用 二.Rdies持久化 2.1持久化的功能 2.2Redis 提供两种方式进行持久化 三.RDB持久化 3.1触发条件 3.1.1手动触发 3.1.2自动触发 3.1.3其他自动触发机制 3.1.4执行流程 3.1.5启动时加载 四.AOF持久化 4.1开启AOF 4.2执行流程 4.2.1命令追加(append) 4.2.2文件写…

【论文阅读22】Label prompt for multi-label text classification

论文相关 论文标题&#xff1a;Label prompt for multi-label text classification&#xff08;基于提示学习的多标签文本分类&#xff09; 发表时间&#xff1a;2023 领域&#xff1a;多标签文本分类 发表期刊&#xff1a;Applied Intelligence&#xff08;SCI二区&#xff0…

FPGA设计时序分析二、建立/恢复时间

目录 一、背景知识 1.1 理想时序模型 1.2 实际时序模型 1.2.1 时钟不确定性 1.2.2 触发器特性 二、时序分析 2.1 时序模型图 ​2.2 时序定性分析 一、背景知识 之前的章节提到&#xff0c;时钟对于FPGA的重要性不亚于心脏对于人的重要性&#xff0c;所有的逻辑运算都离开…

Python 进阶(一):PyCharm 下载、安装和使用

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 一、下载 PyCharm二、安装 PyCharm三、创建项目四、界面汉化五、实用技巧5.1、使用快捷…

EtherNet/IP转 Modbus网关实现AB PLC控制变频器案例

捷米特JM-EIP-RTU网关 Modbus转ETHERNET/IP用于将多个变频器连接到Ethernet/Ip主网&#xff0c;以便森兰变频器可以由AB PLC控制。 配备专用于JM-EIP-RTU网关的EDS文件&#xff0c;AB PLC主站可以控制森兰逆变器从站。 使用 AB 系统的配置方法 1&#xff0c; 运行 RSLogix 500…

OpenGl中的VAO、VBO与EBO

文章目录 VBO(顶点缓冲区对象)VBO的使用 EBO(索引缓冲对象)EBO的使用 VAO(顶点数组对象)VAO的使用 三者的区别someting。。。 哎&#xff0c;很离谱&#xff0c;上个月学learnopengl学到一半跑去看庄懂老师的视频&#xff0c;结果该还的东西迟早得还&#xff0c;再打开之前的工…