修改element UI中Table的背景（大屏项目）

最新推荐文章于 2025-10-20 14:16:31 发布

原创最新推荐文章于 2025-10-20 14:16:31 发布 · 3.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript #前端

本文记录了在Vue项目中如何将Table组件的背景设置为透明的具体步骤和实现代码，包括表格内部元素及过渡效果的背景透明处理，有效解决了大屏项目视觉效果的需求。

最近在做大屏项目，需要修改Table背景为透明色，查阅了一些，最终成功，故记录一下，希望大家可以用到

效果

代码

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 0;
}


::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}
::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}
/* 去除底部白线 */
 .el-table::before{
    background-color: transparent;
  }