element-UI-----el-table表格样式

1、修改表头样式

<el-table  :header-cell-style="{background: '#eef1f6',color: '#606266' }">

2、修改斑马纹颜色

 
 
/* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #1e116d;
}
 
/*表头颜色定义  header-cell-style是表格组件里自带的属性*/
<el-table :data="tableData" stripe :header-cell-style="{background: '#1e116d'}">
.....
</el-table>
 
/* 非斑马纹颜色 */
/deep/.el-table tr {
    background: #15085e;
}
 
/* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
/deep/.el-table td,
.building-top .el-table th.is-leaf {
    border: none;
    color: white;
}
 
/* 这里是滑过斑马纹滑过时的颜色 */
/deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #1e116d;
}
 
用deep的原因是有些样式普通方法修改不了，deep是样式穿透

注意：下面这种做法配合 highlight-current-row 更好用 如果上面的方法修改样式不生效，就用下面的方法

/* 鼠标悬停时的背景颜色 */
::v-deep .el-table tbody tr:hover>td {
  background-color: #dfeefe !important;
}
 
/* 鼠标点击时的背景颜色 */
::v-deep .el-table__body tr.current-row>td {
  background-color: #dfeefe !important;
}