el-table 设置表格背景色透明

转载已于 2023-08-04 17:09:47 修改 · 6.5k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/qq_52790429/article/details/129244473?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-129244473-blog-106944281.235%5Ev38%5Epc_relevant_anti_vip&depth_1-utm_source=distribut

小香菜今天吃什么

关注

标签

#vue.js #elementui #前端

分类前端开发

于 2023-06-26 11:09:51 首次发布

ElementUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在ElementUI中修改el-table组件背景色为透明的方法。通过在表格外层添加一个div，并应用特定的CSS样式，包括使用scoped确保样式生效，以及针对表格的不同部分设置透明背景和文字颜色。最终实现了el-table无背景的效果。

记录ElementUI的el-table修改背景色为透明的方法。

参考文章ElementUI中的el-table表格设置全透明

参考文章Element-UI el-table背景颜色透明

在el-table的外层套一个div


<div class="regional_table">
      <el-table
        :data="tableData"
        :border="true"
        height="calc(100vh - 380px)"
        :span-method="arraySpanMethod"
        :row-class-name="tableRowClassName"
      >
        <el-table-column label="参数" prop="params"></el-table-column>
        <el-table-column label="说明" prop="declare"></el-table-column>
        <el-table-column label="必要性" prop="necessary"></el-table-column>
      </el-table>
 </div>

在style里面设置样式，一定要加scoped，不然样式不生效

<style lang="scss" scoped>
/*最外层透明*/
.regional_table /deep/ .el-table,
.regional_table /deep/ .el-table__expanded-cell {
  background-color: transparent;
  color: #606266;
}
/* 表格内背景颜色 */
.regional_table /deep/ .el-table th,
.regional_table /deep/ .el-table tr,
.regional_table /deep/ .el-table td {
  background-color: transparent !important;
  //表格字体颜色
  color: #606266;
}
</style>