el-pagination分页-自定义左右箭头样式
1,官方样式:

查了网上,有人说可以用slot插槽,但是试过之后,因为 不能插入多个 slot(没法定义名字做区分),所以导致左右按钮一样了。。
2,还有种方法:
利用
prev-text 和 next-text 设置文字,替代图标显示的上下页
3,最终解决办法:
从根部改变按钮所用 icon 图标的content, 随意改成你想要的图标,就可以了。(不过还是只能用 elm本身的icon。)

附上代码:
.btn-prev {
margin-left: 0;
margin-right: 5px;
.el-icon-arrow-left:before {
content: "\e6ea";
}
}
.btn-next {
margin-left: 5px;
margin-right: 0;
.el-icon-arrow-right:before {
content: "\e6e9";
}
}
最终效果:

另外写一下 相关的自定义样式 (active, hover 时)
.btn-next.disabled,
.btn-next:disabled,
.btn-prev.disabled,
.btn-prev:disabled,
.el-pager li.disabled {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
.el-pager {
.active {
background-color: #ff7d00 !important;
color: #fff;
}
li:not(.active):hover {
color: #ff7d00 !important;
}
}
el-pagination分页-自定义左右箭头样式的更多相关文章
- 【笔记】css 自定义select 元素的箭头样式
原文链接:https://www.imooc.com/qadetail/187585?t=281881 最近项目需要自定义select 元素的样式,搜索了一下发现了通过设置select 元素 css ...
- Revit如何设置尺寸标注的箭头样式
在尺寸标注类型属性中,有一名称为"记号标记"的属性,该属性控制线性标注的箭头样式,如图所示,可以从下"记号标记"下拉列表中选择需要的样式进行设置,但是有时候该下 ...
- EasyUI基础入门之Pagination(分页)
前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
- 第二百零九节,jQuery EasyUI,Pagination(分页)组件
jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...
- Django框架 之 Pagination分页实现
Django框架 之 Pagination分页实现 浏览目录 自定义分页 Django内置分页 一.自定义分页 1.基础版自定义分页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- jQuery Pagination分页插件--刷新
源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...
- JSTL+EL表达式+JSP自定义框架案例
不会框架不要紧,我带你自定义框架 前言:这标题说的有点大了,当一回标题党,之前在学JSP的时候提到了JSTL和EL表达式,由于一直钟情于Servlet,迟迟没有更新别的,这回算是跳出来了.这回放个大招 ...
- phpcms_v9 多图字段 内容页,首页,分页自定义字段调用
phpcms_v9 多图字段 内容页,首页,分页自定义字段调用 说明:自定义多图字段名 shigongtu 1 内容页调用 {loop $shigongtu $r} <img src= ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
入职以后的第二个任务 根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...
随机推荐
- MySQL Workbench部分出错及可能解决方案
出错一:8.0.23.0版本,在workbench内建立表eg1,select * from eg1无返回结果,无法向表内导入数据,在如下图的下一步,workbench会直接闪退 可行的办法:(不建议 ...
- PHP后端 H5页面 打开微信小程序
/** * 功能:获取小程序access_token * Author:郑康凯 * Date: 2023/2/6 0006 15:14 */ public function hhsGetAccessT ...
- Kubernetes 1.26.0 集群部署Prometheus监控
前言 该存储库收集 Kubernetes 清单.Grafana仪表板和Prometheus 规则,结合文档和脚本,使用Prometheus Operator提供易于操作的端到端 Kubernetes ...
- 集成mupdf实现手写笔签批应用
1. 首先,需要在Android Studio中集成mupdf,使用Android Studio的Gradle构建系统,可以在dependencies中添加如下依赖: implementation ' ...
- 阻止google浏览器自动更新
修改 "C:\Windows\System32\drivers\etc\host 文件,在最后增加 127.0.0.1 update.googleapis.com 保存后 win+r 快捷键 ...
- 使用win10 wsl中的Debian编译lean 的 lede
安装Debian发行版 启用windows 适用于linux 的 windows子系统 安装Debian 参考p3terx的文章把debian装到非系统盘上: https://p3terx.com/a ...
- mysql 创建函数失败解决办法,版本 8.0.26
报错信息:[Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declarat ...
- 10,java双向链表基础代码复现
双向链表总体来说和单链表差别不大,最大的区别就是node结构中多了一个pre指针(变量)指向前一个节点,因为有了之前的单链表基础,双向链表的复现问题少了很多,基本可以不参考老师的代码自主写下来. 1. ...
- spark structured streaming (结构化流) join 操作( 官方文档翻译)
spark 结构化流 join 连接 结构化流支持将流dataset/DataFrame与静态dataset/DataFrame,或者另一个流数据集-DataFrame连接起来.流式连接的结果是增量生 ...
- 请求浏览器重新加载数据/返回前端Json 数据
右键检查 seeting network dissable cache 勾选上 ================================== from django.http import J ...