关于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 调整角度，使两条线齐全重合。