El componente de la interfaz de usuario del elemento Tabla elimina la línea horizontal en la parte inferior de la celda y establece el color de fondo de la etiqueta.

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>

 

 

Supongo que te gusta

Origin blog.csdn.net/u014288878/article/details/132231471
Recomendado
Clasificación