/deep/ .el-table,
.el-table__expanded-cell {
background-color: transparent;
}
/deep/.el-table th {
background: rgba(70, 114, 255, 0.2) !important;
}
/deep/.el-table tr {
background-color: rgba(15, 19, 30, 0.8) !important;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #212e3e !important;
}
Original intention
The official el-table components packaged by element ui are very easy to use, but it is inevitable that the default style may not necessarily meet the needs of the actual development process, so use the five girls yourself.
Into the pit
One is to modify the header-cell-style and cell-style attributes of el-table in the official document, such as:
<template>
<el-table header-cell-style="border-color: #868686; color: #606266"></el-table>
In addition, you can also use header-cell-class-name and cell-class-name attributes, such as:
<template>
<el-table cell-class-name="cell-class-name"></el-table>
<style>
.cell-class-name {
border-color: #868686;
}
problem
Although the header-cell-style and cell-style attributes can display the effect normally, an exception will be thrown. Anyway, I don’t understand it. In addition, the header-cell-class-name setting override style cannot take effect, and the cell-class -name is fine.
The type check failed
Solution
Set the el-table attribute :cell-style="tableCellStyle"and :header-cell-style="tableHeaderCellStyle"modify the style through js code.
Add in <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> => Add in methods:
// 修改 table cell边框的背景色
tableCellStyle () {
return 'border-color: #868686;'
},
// 修改 table header cell的背景色
tableHeaderCellStyle () {
return 'border-color: #868686; color: #606266;'
}