修改elementUI中分页器的背景色"el-pagination"

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了修改elementUI中分页器的背景色"el-pagination"相关的知识,希望对你有一定的参考价值。

参考技术A elementUI中分页器设置background时的背景色默认是这样的:

然后,我想改成当前选中项是绿色的,其他项是白色的,

修改样式如下:

::v-deep 

  .el-pagination.is-background .el-pagerli:not(.disabled) 

    background-color: #fff; /*进行修改未选中背景和字体 */

    color: #fff;

  

  .el-pagination.is-background.el-pagerli:not(.disabled).active 

    background-color: green; /*进行修改选中项背景和字体 */

    color: #fff;

  



如此设置,可以实现我想要的效果;
注意:要放在scope外,新建一个<style></style>,可适当取消::v-deep

vue+elementui table表格点击单元格单元格改变背景色

参考技术A <el-table
:data="tableData"
border
@cell-click="cellclick"
:cell-style="tableCellStyle">
</el-table>

data()
row:'',
column:''


cellclick (row, column, cell, event)
this.row = row
this.column = column
,
tableCellStyle (row, rowIndex, column)
if (this.row && this.columnName)
if (this.row === row.row && this.column === row.column)
return 'background-color:#ccc;'
else
return 'background-color:#fff;'

,

来源

以上是关于修改elementUI中分页器的背景色"el-pagination"的主要内容,如果未能解决你的问题,请参考以下文章

如何将elementUI 表格(el-table)和分页器(el-pagination)连接起来

elementUI 导航栏点击之后改变背景色,背景色悬停

修改QWidget 背景色

elment表格多选变色 vue Element-ui 表格多选 修改选中行背景色

设置包资源管理器的背景色

vue element el-select hover