el-table设置背景透明(亲试有效)_el-table 背景透明

众所周知,el-table的背景颜色是白色的,若想重新设置背景颜色

注意:

1.重写样式要加（>>>或者/deep/），不然不会生效

2.th ，tr都有背景颜色，都要重写，

那我们开始,上代码

一.首先在el-table 外加个div 自定义class 如图:

<div class="user_skills" style="margin-top:20px;">
	<el-table :data="skills"  :header-cell-style="getRowClass"  >
    	<el-table-column  label="#" type="index"></el-table-column>
    	<el-table-column label="专业技能" prop="data"></el-table-column>
	</el-table>
</div>
1
2
3
4
5
6

二,重写样式 css

.user_skills{
   width: 50%;
   margin: auto;
}
.user_skills /deep/ .el-table--fit{
    padding: 20px;
}
.user_skills /deep/  .el-table, .el-table__expanded-cell {
    background-color: transparent;
}

.user_skills /deep/ .el-table tr {
    background-color: transparent!important;
}
.user_skills /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
}
.el-table::before {//去除底部白线
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 0px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

希望对你有帮助

参考博客:地址