el-table背景色的坑

小政爱学习！

于 2023-11-16 16:19:52 发布

阅读量436

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_58361435/article/details/134444741

版权

文章介绍了如何在Vue.js的el-table组件中修改背景颜色，使用`:deep()`和`:cell-style`、`:header-cell-style`属性来确保文字颜色不会变透明。作者提供了具体的CSS代码示例。

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

我直接修改el-table的背景颜色，修改之后发现还是原来的白色，所以加入一下代码

/*最外层透明*/
  :deep(.el-table),
  :deep(.el-table)__expanded-cell {
    background-color: transparent !important;
  }
  /* 表格内背景颜色 */
  :deep(.el-table  th),
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent !important;
  }

然后在el-table组件中加入这两行代码，要不然字体也会变透明哦！！！

:cell-style="{ color: '#fff' }"
:header-cell-style="{ color: '#fff' }"