【前言】
一般我们在使用ElementUI组件库的时候，在使用el-table时，背景通常是白色的，但有时候不能满足我们的实际需求，我想让el-table背景变为透明色，下面就来说一下如何实现。
【内容】
说明：因为我们通常都是使用ElementUI库的组件，这个组件库是有自己的一套样式的，所以要想实现自己想要的效果，难免要重写样式来实现。
重写样式需要加（>>> 或者 /deep/），不加的话是不会生效的。
1、在el-table外加div并自定义class
<div class="table" style="margin-top:20px;">
<el-table :data="tableData" :header-cell-style="getRowClass" >
<el-table-column label="a" type="index"></el-table-column>
<el-table-column label="b" prop="data"></el-table-column>
</el-table>
</div>
2、重写css样式
.table /deep/ .el-table th {
background-color: transparent!important;
}
.table /deep/ .el-table tr {
background-color: transparent!important;
}
.table /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;
}
到此这篇关于Vue如何设置el-table背景透明样式的文章就介绍到这了,更多相关Vue el-table背景透明内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！