看代码
前端代码为
<div class="main_table t_btn2">// 设置表格背景色,字体颜色以及字体大小<el-table :header-cell-style="{backgroundColor:'transparent',color:'#ffffff',fontSize:'15px',textAlign:'center'}":cell-style="{color: '#fff',backgroundColor:'transparent',fontSize:'13px',textAlign:'center'}":row-style="{color: '#fff',backgroundColor:'transparent',fontSize:'13px',textAlign:'center'}":data="ipTableData"max-height="340"style="width: 100%"><el-table-columnprop="ip"label="IP":show-overflow-tooltip="true"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">IP</p></template></el-table-column><el-table-columnprop="domain":show-overflow-tooltip="true"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">域名</p></template></el-table-column><el-table-columnprop="address"label="来源地址"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">来源地址</p></template></el-table-column><el-table-columnprop="type"label="欺诈类型"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">欺诈类型</p></template></el-table-column><el-table-columnprop="count"label="拦截次数"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">拦截次数</p></template></el-table-column></el-table></div>
css样式代码
// .t_btn2为你的上级父元素class名称 // 由于是只在本页面修改, 所以必须要用 /deep/ 或者 >>> 才能生效 /deep/ 是深度选择器,可自行百度了解更多.t_btn2 /deep/ .el-table, .el-table__expanded-cell {background-color: transparent;}.t_btn2 /deep/ .el-table tr {background-color: transparent!important;}.t_btn2 /deep/ .el-table--enable-row-transition .el-table__body td, .el-table .cell{background-color: transparent;}.t_btn2 /deep/ .el-table__row>td{border: none;}/* 清除底部横线 */.el-table::before {height: 0px;}
最终效果为
