element 表格 去掉背景颜色
错误代码:
发现这样写 表格并没有去掉背景色
解决办法
最后发现使用 ::v-deep
如果前面有其他类名 一定要有空格
!!!
<div class="bkPart posPart t_btn2" style="width: 28%;">
<div class="co-title">缺料预警</div>
<el-table ref="table"
:header-cell-style="{backgroundColor: 'transparent',color: '#ffffff',fontSize: '9px',}"
:cell-style="{color: '#fff',backgroundColor: 'transparent',fontSize: '9px',}"
:row-style="{color: '#fff',backgroundColor: 'transparent',fontSize: '9px',}"
:data="maShortWarnData"
:default-sort="{ prop: '', order: '' }"
max-height="170px">
<template slot="empty">
<span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
</template>
<el-table-column prop="line" label="名称" width="120" align="center" />
<el-table-column prop="totalNeedCount" label="数量" width="50" align="center" />
<el-table-column prop="totalOutCount" label="累计发料" align="center" />
</el-table>
</div>
正确样式代码
// 由于是只在本页面修改, 所以必须要用 /deep/ 或者 ::v-deep 才能生效 /deep/ 是深度选择器,可自行百度了解更多
.t_btn2 ::v-deep.el-table,
.el-table__expanded-cell {
background-color: transparent !important;
}
.t_btn2 ::v-deep.el-table tr {
background-color: transparent !important;
}
.t_btn2 ::v-deep.el-table--enable-row-transition .el-table__body td,
.el-table .cell {
background-color: transparent !important;
}
.t_btn2 ::v-deep.el-table__row>td {
border: none !important;
}
.t_btn2 ::v-deep.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
border-bottom: 1px solid #fff !important;
}
.t_btn2 ::v-deep.el-table td.el-table__cell {
border-bottom: 1px solid #fff !important;
}
.t_btn2 ::v-deep.el-table__empty-block {
background-color: transparent !important;
}
/* 清除底部横线 */
.el-table::before {
height: 0px;
}
正确显示效果