A veces, modificar directamente el estilo del componente no tiene efecto, primero debemos penetrarlo y agregar un div afuera.
<div class="custom-table">
<el-table>
</el-table>
</div>
CSS:
// 設置label的背景色
.custom-table ::v-deep .el-table th {
background: var(--cool-gray-50, #F9FAFB);
border-bottom: none;
}
// 取消行之间的横向边框线
.custom-table ::v-deep .el-table td, .el-table th.is-leaf {
border-bottom: none;
}
//去掉最下面的那一条线
.custom-table ::v-deep .el-table::before {
height: 0px;
}
efecto original
Efecto después de la modificación
Fuera de contexto:
Ícono de ojo abierto: Relleno de ojo · Biblioteca de íconos Bootstrap (bootcss.com)
Icono de ojo cerrado: relleno de barra diagonal · Biblioteca de iconos Bootstrap (bootcss.com)
Y a veces problemas con el color de fondo.
Simplemente establezca un color transparente en el componente correspondiente.
<el-tag style="background-color: #0000;border-color: #0000;">
<svg></svg>
</el-tag>