1、设置表头背景色,在el-table标签上添加header-cell-style
:header-cell-style="{background:'#000'}"
2、设置除表格内容的每行行高,在el-table标签上添加row-style
:row-style="{height:80+'px'}"
3、设置表头文字样式
::v-deep .el-table__header-wrapper {
thead {
th{
div{
font-weight: 700;
font-size: 20px;
}
}
}
}
4、表格内容区域隔行换色
//表格内容颜色
::v-deep .el-table__body tbody tr:nth-child(odd) {
background-color: #282828;
}
::v-deep .el-table__body tbody tr:nth-child(even) td {
background-color: #393939;
}
5、表格tr间距
::v-deep .el-table__body {
border-collapse: separate !important;
border-spacing: 0 15px !important;
table-layout: auto !important;
}
::v-deep .el-table,.el-table__expanded-cell {
background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,.el-table .cell {
background-color: transparent;
}
图片样式
.el-table::before{
background-color: transparent;
}
::v-deep .el-table__header tr,
::v-deep .el-table th, .el-table tr{
background-color:transparent;
}
::v-deep .el-table th>.cell{
font-weight: 700;
color: #fab969;
font-size: 30px;
}
::v-deep .el-table tbody tr td:nth-child(-n+2) div{
color: #d1bc8d;
}
::v-deep .el-table tbody tr td div{
font-size: 32px;
}
::v-deep .el-table__body {
border-collapse: separate !important;
border-spacing: 0 15px !important;
table-layout: auto !important;
tbody tr:nth-child(odd) {
background-color: #282827;
}
tbody tr:nth-child(even) td {
background-color: #3e3e3e;
}
}
::v-deep .el-table,.el-table__expanded-cell {
background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,.el-table .cell {
background-color: transparent;
}
小Bug
用下面样式修改即可
::v-deep .el-table__header tr,
::v-deep .el-table th, .el-table tr{
background-color:transparent;
}