Le tableau des éléments supprime la couleur de fond
code d'erreur:
On constate qu'écrire le formulaire de cette manière ne supprime pas la couleur de fond
Solution
Enfin trouvé à utiliser ::v-deep
s'il précédé d'autres noms de classe 一定要有空格
! ! !
<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>
code de style correct
// 由于是只在本页面修改, 所以必须要用 /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;
}
Afficher correctement l'effet