Element-ui 表格样式的修改

对应的样式图

对应CSS的代码块

// thead部分的样式修改
/deep/ .el-table thead th{
  height: 30px;
  font-size: 14px;
  padding: 0px 10px 0px 10px;
  color: #47494e;
  font-weight: 500;
  background: #f8f8f8 !important;
}
// tbody部分的样式修改
/deep/ .el-table__body td,.el-table__body th{
  height: 35px;
  padding: 0px 10px 0px 10px;
  color: #757575;
  font-size: 14px;
}
// 表格border颜色修改
/deep/ .el-table__body tr:hover>td{
  background: #eaf2fe;
} 
/deep/ .el-table--group, .el-table--border {
  border-top: 1px solid #d5dbeb;
  border-left: 1px solid #d5dbeb;
}
/deep/ .el-table th.is-leaf, .el-table td {
  border-bottom: 1px solid #d5dbeb;
  border-right: 1px solid #d5dbeb;
}
/deep/ .el-table tr td{
  border-bottom: 1px solid #d5dbeb;
  border-right: 1px solid #d5dbeb;
}
/deep/.el-table--group::after, .el-table--border::after, .el-table::before {
  content: '';
  position: absolute;
  background-color: #d5dbeb;
  z-index: 1;
}
// 复选框样式的修改
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: #294ce4;
  border-color: #294ce4;
}
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #294ce4;
  border-color: #294ce4;
}
/deep/ .el-checkbox__inner:hover{
  border: 1px solid #294ce4;
}