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>

• 改之前效果

• 改之后效果

 

 转载文章ElementUI中的el-table表格设置全透明_element设置透明背景_小小怪-怪小小的博客-CSDN博客