这里演示了一套深蓝配色的例子:
注意,在scoped里时需要穿透一下,也就是用::deep{}包起
<style>
.el-table {
width: 100%;
background: #435b89;
border-color: #6e7a98;
}
.el-table .el-button {
margin-left: -2px;
margin-right: 5px;
font-size: 13px;
}
/* 表头 */
.el-table th.el-table__cell {
background: #062b6a;
color: #fff;
border-color: #6e7a98;
padding: 0;
}
/* 行 */
.el-table .el-table__row {
background: #435b89;
color: #fff;
}
/* 选中行颜色,需要开启 highlight-current-row */
.el-table__body tr.current-row > td.el-table__cell {
background-color: #202a33;
}
/* 当前行 鼠标悬浮 */
.el-table__body tr.hover-row > td.el-table__cell {
background: #062b6a;
border-color: #6e7a98;
}
/* 当前行 鼠标悬浮 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
background: #0b61e1;
border-color: #6e7a98;
}
/* 坚间隔线 */
.el-table--border .el-table__cell {
border-right: 1px solid #6e7a98;
padding: 0;
}
/* 横间隔线 */
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #6e7a98;
padding: 0;
}
/* 边框 */
.el-table--border::after, .el-table--group::after, .el-table::before,
.el-table__fixed-right::before, .el-table__fixed::before {
background-color: #6e7a98;
}
/* 滚动条 */
*::-webkit-scrollbar {
background: transparent;
}
*::-webkit-scrollbar-track {
background: #435b89;
}
*::-webkit-scrollbar-thumb {
background-color: #409eff;
border-radius: 6px;
}
/* 分页 */
.el-pagination {
background: #435b89;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 10px;
}
.el-pagination__total,
.el-pagination__jump {
color: #fff;
}
</style>
效果: