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

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