/ deep / .el-table,
.el-table__expanded-cell {
cor de fundo: transparente;
}
/deep/.el-table th {
fundo: rgba (70, 114, 255, 0,2)! importante;
}
/deep/.el-table tr {
cor de fundo: rgba (15, 19, 30, 0,8)! importante;
}
/deep/.el-table--enable-row-hover .el-table__body tr: hover> td {
cor de fundo: # 212e3e! importante;
}
Intenção original
Os componentes oficiais el-table empacotados pelo element ui são fáceis de usar, mas é inevitável que o estilo padrão não atenda necessariamente às necessidades do processo de desenvolvimento real, então use as cinco meninas você mesmo.
Dentro do poço
Uma é modificar os atributos de estilo de célula de cabeçalho e estilo de célula de el-table no documento oficial, como:
<template>
<el-table header-cell-style="border-color: #868686; color: #606266"></el-table>
Além disso, você também pode usar os atributos header-cell-class-name e cell-class-name, como:
<template>
<el-table cell-class-name="cell-class-name"></el-table>
<style>
.cell-class-name {
border-color: #868686;
}
problema
Embora os atributos header-cell-style e cell-style possam exibir o efeito normalmente, uma exceção será lançada. De qualquer forma, não entendi. Além disso, o estilo de substituição da configuração header-cell-class-name não leva efeito, e a classe de célula -nome está bem.
A verificação de tipo falhou
Solução
Defina o atributo el-table :cell-style="tableCellStyle"e :header-cell-style="tableHeaderCellStyle"modifique o estilo por meio do código js.
Adicionar em <template>:
<el-table
:data="tableData"
:v-loading="tableLoading"
row-key="id"
height="100%"
highlight-current-row
show-summary
border
fit
style="width: 100%; border:1px solid #EBEEF5; border-color: #868686"
:cell-style="tableCellStyle"
:header-cell-style="tableHeaderCellStyle"
>
<el-table-column fixed type="index" width="50"></el-table-column>
</el-table>
<script> => Métodos de adição:
// 修改 table cell边框的背景色
tableCellStyle () {
return 'border-color: #868686;'
},
// 修改 table header cell的背景色
tableHeaderCellStyle () {
return 'border-color: #868686; color: #606266;'
}