el-table透明化

最新推荐文章于 2025-04-16 11:16:29 发布

原创最新推荐文章于 2025-04-16 11:16:29 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何将Element UI中的ElTable组件完全透明化的方法，包括整体、行、单元格的背景透明设置，hover和偶数行的特殊样式调整。

问题：
在el-table透明化时，组件总是有白色底，无法透明化。
修改方案：

//透明化整体
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
//透明化行、单元格
el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
}
//hover时样式
.el-table tbody tr:hover>td {
  background-color: #367f7f78 !important
}

//偶数行样式
.el-table__row--striped td {
  background-color: #45797b33 !important
}
//奇数行样式
.el-table__row:not(.el-table__row--striped) {
  background: #1439391c !important;
}

效果：

在这里插入图片描述