Element设置表格对角线

设置对角线

效果图如下

html代码

<el-table-column label="指标" width="150" align="center" fixed>
          <el-table-column
            prop="deptName"
            label="填报部门"
            align="center"
            width="150"
            fixed
          ></el-table-column>
</el-table-column>

style样式

.el-table /deep/ thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none; /*中间的横线去掉*/
}
.el-table /deep/ thead.is-group tr:first-of-type th:first-of-type div.cell {
  text-align: right; /*上边文字靠右*/
}
.el-table /deep/ thead.is-group tr:last-of-type th:first-of-type div.cell {
  text-align: left; /*下边文字靠左*/
}
/*核心代码*/
.el-table /deep/ thead.is-group tr:first-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 150px; /*斜线的长度*/
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-52.5deg); /*调整斜线的角度*/
  transform-origin: top;
}
.el-table /deep/ thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 150px; /*斜线的长度*/
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-53.5deg); /*调整斜线的角度*/
  transform-origin: bottom;
}