ElementUI：设置table的背景透明、根据表格情况设置背景色、设置文字颜色、文字左右间距、表头、每一行高度_element 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;
}
1
2
3
4
5
6
7
8
9

设置文字颜色、文字左右间距

注意：设置文字间距为0，可能视觉上仍有间距，因为设置了每个表格的宽度，可以适当调节宽度

::v-deep .cell{
  padding: 0;
  color:#fff;
}
1
2
3
4

设置表头高度

/*表头*/
::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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

根据情况设置背景颜色

绑定样式函数： :cell-style="cellStyle"

cellStyle(row){//根据情况显示背景色
  if(row.column.label==="正常"){
    return 'background:#2D5AB9'
  }else if(row.column.label==="滞后"){
    return 'background:#974356'
  }
}
1
2
3
4
5
6
7

同理可以设置其他的

完整样式

完整代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103