关于element-ui:使用element给表头单元格添加斜线分割线

先看下效果图，表头第一个单元格应用斜线宰割。

html代码：

<el-table-column label="时段" align="right" width="150">
  <el-table-column
    prop="month"
    label="月度"
    width="120"
    align="center"
    header-align="left"
  >
  </el-table-column>
</el-table-column>

留神：在el-table-column上增加了align和header-align两个属性，header-align是表头的对齐形式，而align是表格内容的对齐形式，所以能够依据不同的原型图进行相干设置。

css：

::v-deep .el-table thead.is-group th {
  background: none;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 82px; /*这里须要本人调整，依据td的宽度和高度*/
  top: 0;
  left: 0;
  background-color: #bbb;
  opacity: 0.3;
  display: block;
  transform: rotate(-58deg); /*这里须要本人调整，依据线的地位*/
  transform-origin: top;
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 82px; /*这里须要本人调整，依据td的宽度和高度*/
  bottom: 0;
  right: 0;
  background-color: #bbb;
  opacity: 0.3;
  display: block;
  transform: rotate(-59.9deg); /*这里须要本人调整，依据线的地位*/
  transform-origin: bottom;
}

留神：代码中有正文的中央是须要本人手动去微调的，其实就是将时段和月度分成两个元素，而后应用rotate调整角度，使两条线齐全重合。