先看下效果图,表头第一个单元格应用斜线宰割。
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调整角度,使两条线齐全重合。