element plus table组件去掉/更改hover样式

需求背景：

此需求属于大屏展示数据的一个内容块，领导要做成滑动下拉的格式，具体设计交给我，既然想着要展示数据那必须表格，于是几分钟就搞定基本数据，但是实在是太丑。白色跟透明化大屏格格不入，于是尝试更改table组件的css

1.实现表体透明化

/*表体最外层透明*/
:deep(.el-table),
.el-table__expanded-cell {
  background-color: transparent;
  outline: none !important;
  border-collapse: collapse !important;
}

2.实现表体颜色重写

//重写表体颜色
:deep(.el-table) tbody tr {
  background-image: linear-gradient(90deg, rgba(13, 57, 98, 0.45) 0%, rgba(7, 10, 22, 0.45) 100%) !important;
  border: solid 1px rgba(68, 138, 202, 0.45) !important;
  opacity: rgba(255, 255, 255, 0.55) !important;
}

3.重写表体文字默认颜色

:deep(.el-table) tbody tr div {
  color: aqua !important;
  opacity: 1 !important;
}

4.清除表体间距，间隔线

//清除表体间距,间隔线
:deep(.el-table) th,
:deep(.el-table) tr,
:deep(.el-table) td {
  padding: 03px 0;
  background-color: transparent;
  outline: none !important;
}

5.说明

这时候呢发现表体虽然变透明好看了，但是表头没变....于是再次框框写

6.表头更改

//表头透明化
:deep(.el-table) thead th {
  background-color: rgba(28, 72, 116, 0.37) !important;
  border: solid 1px #448aca !important;
}
:deep(.el-table) thead th div {
  color: #ffffff !important;
  opacity: 1 !important;
}
//表头间隔线清除
:deep(.el-table) th:not(:first-child) {
  border-left-color: transparent !important;
}
:deep(.el-table) th:not(:last-child) {
  border-right-color: transparent !important;
}

7.说明

写完自我感觉良好，ui说你的hover效果为什么是白色的啊，白色和靛青色很不协调，客户看着不累吗？？我又是框框改

8.更改行hover效果

//重写tablehover
:deep(.el-table) tbody tr:hover{
  background-color:black !important;
  cursor: pointer;
}
//清除tablehover
:deep(.el-table){
  --el-fill-color-light: none;
}

9.成品展示

这样就全好啦，各位其中的颜色可以自行更改，数据由于是假数据，其中一点的小瑕疵也就稍微忍忍，后续传感器真实数据上来了再对齐！