Element UI 组件 Table 去除单元格底部的横线并设置label背景色

有时候直接修改组件样式是不生效的，我们需要穿透，先在外部加一个div

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

css： 

// 設置label的背景色
.custom-table ::v-deep .el-table th {
  background: var(--cool-gray-50, #F9FAFB);
  border-bottom: none; 
}

// 取消行之间的横向边框线
.custom-table ::v-deep .el-table td, .el-table th.is-leaf {
  border-bottom: none; 
}

//去掉最下面的那一条线
.custom-table ::v-deep .el-table::before {
  height: 0px;
}

原始效果 

修改后效果

题外话：

 睁眼图标：Eye fill · Bootstrap 图标库 (bootcss.com)

 闭眼图标：Eye slash fill · Bootstrap 图标库 (bootcss.com)

以及有时候的背景色问题

扫描二维码关注公众号，回复： 16535276 查看本文章

在对应组件设置一个透明的颜色就行

<el-tag style="background-color: #0000;border-color: #0000;">
        <svg></svg>
</el-tag>