|
使用CSS穿透做，我用的是SCSS——::v-deep
设置背景色透明
::v-deep .el-table__expanded-cell {
background-color: transparent !important;
}
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
background-color: transparent;
}
设置文字颜色、文字左右间距
注意：设置文字间距为0，可能视觉上仍有间距，因为设置了每个表格的宽度，可以适当调节宽度
::v-deep .cell{
padding: 0;
color:#fff;
}
设置表头高度
/*表头*/
::v-deep .el-table__header th {
padding: 0;
height: 30px;
line-height: 30px;
}
/*每一行*/
::v-deep .el-table__body tr,
::v-deep.el-table__body td {
padding: 0;
height: 30px;
line-height: 30px;
}
根据情况设置背景颜色
绑定样式函数： :cell-style="cellStyle"
cellStyle(row){//根据情况显示背景色
if(row.column.label==="正常"){
return 'background:#2D5AB9'
}else if(row.column.label==="滞后"){
return 'background:#974356'
}
}
同理可以设置其他的
完整样式
完整代码
export default {
name: "LeftMiddle",
data() {
return {
tableData: [
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
{name:"管道管道", designNormal: 10, designDelay: 10, inviteNormal: 10, inviteDelay: 10, workNormal:10, workDelay:10},
]
}
},
methods:{
cellStyle(row){//根据情况显示背景色
if(row.column.label==="正常"){
return 'background:#2D5AB9'
}else if(row.column.label==="滞后"){
return 'background:#974356'
}
}
}
}
@import "./../../../../style/universal";
#compositeLeftMiddle {
height: $occupy-all;
width: $occupy-all;
//background-color: red;
::v-deep .cell{
padding: 0;
color:#fff;
}
::v-deep .el-table__header th {
padding: 0;
height: 30px;
line-height: 30px;
}
::v-deep .el-table__body tr,
::v-deep.el-table__body td {
padding: 0;
height: 30px;
line-height: 30px;
}
::v-deep .el-table {
background-color: transparent !important;
color: #fff !important;
}
::v-deep .el-table__expanded-cell {
background-color: transparent !important;
}
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
background-color: transparent;
}
}
|