vue.js使用ElementUI里的table组件时，要求背景设置透明并去除下划线

在实际开发使用中，会遇到给ElementUI里的table组件设置背景色的问题。在借鉴了几位博主写的方法后，在此做了下简单总结。方法如下（本例是设置成透明的）：

1. 设置div （最好在外层包裹一层div）

<div class="table-wrapper">
    <el-table></el-table>
</div>

2. 设置css

1) lang="less"

<style lang="less" scoped>
/**表格背景透明 */
//透明化整体
.table-wrapper /deep/  .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
//透明化行、单元格,删除表头下横线
.table-wrapper /deep/ tr, .table-wrapper /deep/ th, .table-wrapper /deep/ td {
  background: #1439391c !important;
  color:#fff;
  border-bottom: 0px; //删除表头下横线
}
//hover时样式
.table-wrapper /deep/  .el-table tbody tr:hover>td {
  background-color: #367f7f78 !important
}
// 表格内容(有用)
.table-wrapper /deep/ .el-table__row {
  background: #1439391c !important;
  color: #46d4ff;
}
/**表格背景透明end */

</style>

2) lang="scss"

<style lang="scss" scoped>
/**表格背景透明 */
//透明化整体
.table-wrapper ::v-deep  .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
//透明化行、单元格,删除表头下横线
.table-wrapper ::v-deep tr, .table-wrapper ::v-deep th, .table-wrapper ::v-deep td {
  background: #1439391c !important;
  color:#fff;
  border-bottom: 0px; //删除表头下横线
}
//hover时样式
.table-wrapper ::v-deep  .el-table tbody tr:hover>td {
  background-color: #367f7f78 !important
}
// 表格内容(有用)
.table-wrapper ::v-deep .el-table__row {
  background: #1439391c !important;
  color: #46d4ff;
}
/**表格背景透明end */


</style>

scss相比较于less，是把/deep/改为 ::deep 来修改样式，因为scss模式下，使用/deep/会报loader错误。

 

感谢两位博主的文章：

https://blog.csdn.net/roury/article/details/109112983

https://blog.csdn.net/qq_18228337/article/details/107640131