Vue—设置el-table背景透明样式

【前言】

一般我们在使用ElementUI组件库的时候,在使用el-table时,背景通常是白色的,但有时候不能满足我们的实际需求,我想让el-table背景变为透明色,下面就来说一下如何实现。

【内容】

说明:因为我们通常都是使用ElementUI库的组件,这个组件库是有自己的一套样式的,所以要想实现自己想要的效果,难免要重写样式来实现。

重写样式需要加(>>> 或者 /deep/),不加的话是不会生效的。

1、在el-table外加div并自定义class

2、重写css样式

.table /deep/ .el-table th {
    background-color: transparent!important;
}

.table /deep/ .el-table tr {
    background-color: transparent!important;
}
.table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
}
.el-table::before {//去除底部白线
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 0px;
}

你可能感兴趣的:(#,Vue,vue.js)