以下为表格透明样式代码。
.el-table::before {
background-color: transparent;
// background-color: linear-gradient(to top, #CF5A64, #CB555F);
}
::v-deep .el-table__header tr,
::v-deep .el-table th,
.el-table tr {
background-color: transparent;
}
::v-deep .el-table__header{
background-color: linear-gradient(to top, #1871FE, #1871FE);
}
::v-deep .el-table th > .cell {
font-weight: 700;
color: #fff;
font-size: 12px;
}
::v-deep .el-table tbody tr td:nth-child(-n + 2) div {
color: #fff;
}
::v-deep .el-table tbody tr td div {
font-size: 14px;
}
::v-deep .el-table td, ::v-deep .el-table th.is-leaf{
border-bottom: 1px solid #06214a;
}
::v-deep .el-table__body {
// border-collapse: separate !important;
// border-spacing: 0 15px !important;
// table-layout: auto !important;
tbody tr{
background-color: transparent;
}
}
::v-deep .el-table .cell{
color: #fff;
}
::v-deep .el-table,
.el-table__expanded-cell {
background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
background-color: transparent;
}
// 分页样式改造
/deep/ .el-pagination.is-background .btn-prev{
background: transparent;
border-radius: 2px;
border: 1px solid #295a85;
color: #fff;
}
/deep/ .el-pagination.is-background .btn-next{
background: transparent;
border-radius: 2px;
border: 1px solid #295a85;
color: #fff;
}
/deep/ .el-pagination.is-background .el-pager li{
background: transparent;
border-radius: 2px;
border: 1px solid #295a85;
color: #fff;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background: #409eff;
}
/deep/ .el-pagination__editor.el-input .el-input__inner{
background: transparent;
border: 1px solid #295a85;
color: #fff;
}
/deep/ .el-pagination__total, /deep/ .el-pagination__jump{
color: #fff;
}
分页效果如下: