Element-UI表格自定义背景颜色

笔记

1.如图所示

2. 自定义样式

此处自定义设置时要加 /deep/、important，否则不生效；

<style scoped="scoped">
// 更改表头背景颜色
/deep/.el-table thead tr>th{background-color: #FFDAB9;
}
// 更改表格每行背景颜色
/deep/.el-table tbody tr>td{background-color: #FFEFD5;
}
// 设置鼠标经过时背景颜色
/deep/.el-table tbody tr:hover>td{background-color:#FFFFF0!important;
}
</style>

清除鼠标经过时的背景颜色：

/deep/.el-table tbody tr:hover>td{

background-color: unset !important;

}

* 如果未设置!important该效果不生效

自定义样式时使用f12查看元素，找到对应元素的标签或者类名，如果<style scoped="scoped">设置scoped就需要加/deep/，有的还需要!important才会生效。

Element-UI表格自定义背景颜色相关推荐

element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
Pycharm如何设置自定义背景颜色
Pycharm可以通过设置主题来设定背景颜色,但主题的背景颜色也仅仅局限特定的几种,通过如下的方式可以自定义背景颜色. File--Settings--Editor--General--(右侧上方的框 ...
easyExcel自定义背景颜色easyPoi自定义修改表头背景色
背景:Excel自定义背景颜色,自定义表头背景颜色注意点:单元格设置背景颜色失效原因/不生效的原因,通常是因为只设置了setFillForegroundColor 参数,这样肯定是不行的,还需要再设 ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
如何给基于Element-UI的表格添加背景颜色
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.如何给基于Element-UI的表格添加背景颜色? 二.使用步骤 1.复制Element-UI的Table 2.j ...
【Typora】自定义背景颜色（护眼绿）高亮颜色选中内容颜色高亮快捷键
自定义背景颜色.选中内容背景颜色.高亮标记内容颜色注意查看当前使用的主题拉到最下面,添加如下代码: content {background-color: #CCE8CF; }mark {backg ...
element UI 表格做下滑滚动效果，请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
element table 表格修改背景为透明并去除边框
1 .el-table{ 2 /* 表格字体颜色 */ 3 color:white; 4 /* 表格边框颜色 */ 5 /* border: 0.5px solid #758a99; */ 6 hei ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...

Element-UI表格自定义背景颜色

Element-UI表格自定义背景颜色相关推荐

最新文章

热门文章