ElementUI:设置table的背景透明、根据表格情况设置背景色、设置文字颜色、文字左右间距、表头、每一行高度
ElementUI中设置table的背景透明、根据表格情况设置背景色、设置文字颜色、文字左右间距、表头、每一行高度
·
使用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'
}
}
同理可以设置其他的
完整样式
完整代码
<template>
<div id="compositeLeftMiddle">
<el-table
:data="tableData"
style="width: 100%;font-size:10px;"
:cell-style="cellStyle" >
<el-table-column align="center" label="项目治理计划" >
<el-table-column prop="name" label="单位" width="57" align="center">
</el-table-column>
<el-table-column align="center" label="地质灾害及河流穿跨越实施进度">
<el-table-column label="设计阶段" align="center">
<el-table-column prop="designNormal" label="正常" width="38" align="center"></el-table-column>
<el-table-column prop="designDelay" label="滞后" width="38" align="center"></el-table-column>
</el-table-column>
<el-table-column label="施工招标" align="center">
<el-table-column prop="inviteNormal" label="正常" width="38" align="center"></el-table-column>
<el-table-column prop="inviteDelay" label="滞后" width="38" align="center"></el-table-column>
</el-table-column>
<el-table-column label="现场施工" align="center">
<el-table-column prop="workNormal" label="正常" width="38" align="center"></el-table-column>
<el-table-column prop="workDelay" label="滞后" width="38" align="center"></el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
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'
}
}
}
}
</script>
<style lang="scss" scoped>
@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;
}
}
</style>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献8条内容
所有评论(0)