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 ...
随机推荐
- java 实现Excel导入导出功能
本文记录 首先需要准备一个导入模板的实体类 import cn.iocoder.yudao.framework.excel.core.annotations.DictFormat; import cn ...
- shell脚本:报错syntax error near unexpected token `$'\r''解决方法
之前的shell脚本是在服务器上编写的,后来又已复制的方式存在在了电脑上,以txt文件的形式存放的.于是复制到了编辑工具中,进行了相应项的修改.修改完毕后,拿到服务器上测试,结果执行sh XXX.sh ...
- springboot Elasticsearch 实体创建索引设置Date 类型字段失败
springboot Elasticsearch 实体创建索引设置Date 类型字段失败,需添加以下注解 @Field(type = FieldType.Date, format = DateForm ...
- C#实现不用随机函数(Random)的洗牌算法
代码不多,先看效果: 类代码: 1 static class ShuffleCards 2 { 3 private static int lastHash = 0; 4 public static v ...
- win10如何设置共享媒体流?
一.win10设置媒体流共享 1 电脑开机后,点击右下角的"网络连接-网络和Internet设置". 2 进入设置界面后,点击"网络和共享中心". ...
- 《Makefile中DEP_LIBRARIES变量的作用》
1.例子 DEP_LIBRARIES := lib@InfoSDK_api lib@WMTMedia lib@WMTUtil lib@curl 该变量是Makefile里面内置的变量,作用是指定依赖的 ...
- P1219 [USACO1.5]八皇后 Checker Challenge
好长时间没登博客园了,今天想起了账号密码,遂发一篇题解 最近因为复赛正在复健搜索,所以做了这道题 这道题说难并不是很难,但是在于这个题需要找到两个规律 以下是原题 [USACO1.5]八皇后 Chec ...
- django admin 字段设置
来源:http://xieboke.net/article/100/ django admin 后台里有些输入框长度.宽度.提示语等,可能不满足我们的需求,这个时候,我们就需要对 admin 的样式进 ...
- SQLSERVER日期查询(年、月、日、季、周、时、分、秒)
常用日期查询操作 SELECT GETDATE () [当前日期], DATENAME (YEAR, GETDATE ()) [年], DATENAME (MONTH, GETDATE ()) [月 ...
- chatgpt 的训练数据时间内容估计
I noticed that the data you quoted is dated September 2021, but it's already 2023. I apologize for t ...