使用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>
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐