ElementUI Pagination 分页修改背景色

最新推荐文章于 2023-11-09 16:27:58 发布
最新推荐文章于 2023-11-09 16:27:58 发布
阅读量2.5k 收藏 3
点赞数 1
分类专栏： web前端 文章标签： elementui css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17627195/article/details/116857149
版权

CSS 代码
可以在CSS里面增加其他代码，设置选中后的背景颜色等

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #ff2832;
}

修改前
在这里插入图片描述

修改后
在这里插入图片描述

最凶残的小海豹
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery pagination 分页组件 2.5.0
02-28
jquery pagination 分页组件 jquery pagination 分页组件 jquery pagination 分页组件 官网 https://pagination.js.org/index.html 文档 https://pagination.js.org/docs/index.html
vue-element更改分页样式(颜色)
热门推荐
qq_34169240的博客
04-20 1万+
默认样式： 更改颜色为： css: /*带背景的分页按钮背景色begin*/ .el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #08C0B9; color: #FFF; } .el-pagination.is-background ....
更改element-ui中的分页器样式——功能实现
yehaocheng520的博客
07-12 5688
在工作过程中，经常会用到table表格用于数据的展示，对应的数据过多时，则需要用到分页器。 elementUi中已经有了很多分页器的样式，完全可以满足正常的使用需求。 如果想要实现下方的分页器的样式，则需要改动样式及部分功能： 首先可以看到想要的效果图中，跟elementUi中红框标注的样式很类似。 区别在于： 页码的背景颜色及边框 上页 下页将图标改为文字 添加首页 尾页 html部分代码如下： <div class="page"> <div class="homePag
elementplus 修改分页组件el-pagination的背景色，并且让其居中，显示中文（默认是英文）
大胆刁民的博客
04-04 9222
elementplus 修改分页组件el-pagination的背景色，并且让其居中，显示中文（默认是英文）
给el-pagination分页器添加背景色
xx820702的博客
05-28 1429
给el-pagination分页器添加背景色只需要加上background即可 <el-pagination background></el-pagination>
前端案例：基于el-table和el-pagination实现数据的分页效果
m0_67401746的博客
03-02 2983
首先使用 el-table(表格) 和 el-pagination(分页) 组件需要npm 下载 Element UI 组件库，下载安装方式参见官网：Element - The world’s most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库[这里是图片001]https://element.eleme.cn/#/zh-CN/component/installation 目录 一、案例效果 二、实现步骤&amp
vue修改el-pagination被选中背景颜色
m0_51589319的博客
09-25 4655
一般我们正常的属性会写在scope里，我们不想直接粗暴地把scope去掉影响全局，这个时候再写一个不带scope的style，把我们要覆盖的样式放进去，就可以了，一般设置一下active的背景颜色，以及hover时候的字体颜色。如下： <style> .el-pagination.is-background.el-pager li:not(.disabled){ background-color:#fff;/*进行修改未选中背景和字体*/ color:#fff; } .el-p
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
最新发布
01-25
在Vue2框架中，ElementUI是一个非常流行的UI组件库，提供了丰富的组件，如表格、按钮、弹窗等，其中el-pagination是用于实现分页功能的组件。为了在多个页面上复用并统一分页样式，我们可以将其封装为一个公用组件。...
vue+elementUI组件table实现前端分页功能
10-15
本文将深入探讨如何使用Vue和Element UI组件`el-table`和`el-pagination`来创建一个高效的前端分页系统。 首先，前端分页与后端分页的主要区别在于数据处理的位置。后端分页是在服务器端完成的，每次用户翻页都会向...
jQuery EasyUI API 中文文档 - Pagination分页
10-28
在这些组件中，Pagination 分页是用于处理大量数据展示的重要工具，尤其适用于数据表格或其他需要分页浏览的情况。 `Pagination` 分页组件允许用户轻松地浏览和导航大量的数据集，而无需一次性加载所有数据，从而...
ElementUi与分页查询的总结与代码
07-01
通过这样的配置，ElementUi的`<el-pagination>`组件就可以和你的后端服务无缝对接，实现分页查询的功能。同时，`<el-table>`组件可以用于展示查询结果，它同样提供了丰富的定制化选项，如列定义、排序、筛选等。 在...
element-plus分页组件中被选中的背景色定义
insist_life的博客
10-19 1242
在这个组件中单独修改变量“--el-color-primary”的值，那么当前被修改的这个变量只会作用于这个组件上，以此达到修改的效果。可以看出来此时的is-active选择器使用的background-color对应的是变量“--el-color-primary”，因此修改这个即可。element-plus库中的分页组件，默认的选中背景色为天蓝色。但是有时候为了适应当前项目的整体背景色，需要进行修改。），开发者可以进行特殊样式的处理。那为啥修改这个变量，就能改变分页组件的背景色呢？
el-pagination样式美化
skysys的研究小屋
01-27 2933
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 10, 20]" :page-size="5" layout="prev, pager, next, sizes,total" :total="400" background > </el-pagination&g.
element-ui自定义分页器样式
weixin_49696014的博客
12-30 3328
修改选中页的背景高亮色 .roster /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #dd1f24 !important; } 去除下拉框和输入跳转到第几页输入框的样式 @deep: ~'>>>'; //样式修改 @{deep}.el-input__inner{ border: none; } 不知道修改下拉菜
element 分页 背景色
Yangpengxunb的博客
02-22 526
elementui分页器样式修改
修改el-pagination样式，颜色
m0_69202593的博客
11-09 1468
【代码】修改el-pagination样式，颜色。
修改elementUI分页背景颜色
m0_58122175的博客
07-21 4087
修改element-ui分页点击背景色
修改elementUI中分页器的背景色
yinge0508的博客
09-05 6425
elementUI中分页器的设置background时的背景色默认是这样的： 然后，我想改成当前选中项是绿色的，其他项是白色的， 修改样式如下： ::v-deep { .el-pagination.is-background .el-pager li:not(.disabled) { background-color: #fff; // 进行修改未选中背景和字体 // color: #fff; } .el-pagination.is-background .e
修改element 分页背景颜色 分页按钮颜色
web_xiaojiang的博客
06-29 3413
记录-----修改element 分页背景颜色 分页按钮颜色 .el-pagination span{ background: #574225; border: 1px solid #FFBB46; color: #FFFFFF; padding: 0 5px; line-height: 2; border-radius: 4px; } .el-pagination.is-background .el-pager li:not(.disabled){ background
el-pagination分页背景色
08-24
el-pagination分页背景色可以通过修改样式来实现。引用中的代码展示了如何使用CSS选择器来控制el-pagination的背景色。你可以使用类名选择器和伪类来选择具体的元素，并对其应用背景色样式。例如，使用`:deep(.el-pagination.is-background)`来选择具有类名`.el-pagination`和`.is-background`的元素，然后通过添加`background-color`属性来改变背景色。 另外，引用提供了一个修改el-pagination背景色的方法，你可以在App.vue文件中添加相关配置。具体的配置可以参考引用提供的代码。 需要注意的是，引用指出在使用el-pagination时，某些浏览器可能会出现黑色边框的样式问题。如果你遇到了这个问题，你可以尝试以下解决方案。请查看引用获取更多详细的信息。 总结来说，你可以使用CSS选择器修改el-pagination分页组件的背景色，可以参考引用中的代码。此外，你也可以根据引用的配置方法来修改el-pagination的背景色。如果你遇到了黑色边框的样式问题，可以查看引用提供的解决方案。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [解决360浏览器或者IE等浏览器使用element 中的el-pagination分页点击有黑框问题](https://blog.csdn.net/qq_45067263/article/details/124474743)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [elementplus 修改分页组件el-pagination的背景色，并且让其居中，显示中文（默认是英文）](https://blog.csdn.net/qq_45886944/article/details/123959787)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值