el-table 背景色和hover 样式修改

/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;

}

 

初衷

element ui官方封装好的 el-table 组件， 好用是挺好用的，但不可避免的是默认的样式并不一定能满足实际开发过程中的需要，那就自己动用五姑娘吧。

入坑

一是参考官方文档里面 el-table 的 header-cell-style 和 cell-style 属性进行修改，如：