el-table去除默认的背景色

Mars空港

已于 2023-12-15 11:32:22 修改

阅读量5.8k

点赞数 2

文章标签： Element-UI Table 样式修改深色主题 CSS

于 2022-10-20 11:58:19 首次发布

本文链接：https://blog.csdn.net/weixin_45884508/article/details/127424396

版权

本文介绍了如何修改Element-UI Table组件的样式，使之背景透明，文字颜色适配深色主题，重点展示了CSS选择器和样式的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我们在使用element-ui的Table 表格的默认样式

由于我的项目不需要白色，就改为了无色

::v-deep .el-form-item {
  margin: 0 5px !important;
  // padding: 20px;
  // background-color: ;
}
::v-deep .el-table,
.el-table__expanded-cell {
  padding: 20px !important;
  background-color: transparent !important;
}
::v-deep .el-table th {
  background-color: transparent !important;
  border-bottom: 1px solid #5078fc !important;
  color: #fefefe !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
::v-deep .el-table th > .cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}
.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100%!important;
  height: 0px !important;
}

::v-deep .el-form-item__label {
  color: white !important;
}

由于的我背景色比较重，文字的颜色也改为了白色，可以根据项目修改