方式一:参考element表格表头斜杠,让你的数据更有条理_el-table 表头斜线-CSDN博客
缺点:当屏幕放大或者缩小的时候,斜线会变形,得使用@media screen根据屏幕大小一个个去调整,调得太麻烦了,就放弃了这种方式,感兴趣的可以试试
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="类型" width="150" align="center">
<el-table-column label="月份" width="150"></el-table-column>
</el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
<el-table-column label="日期"></el-table-column>
</el-table>
样式如下
/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type {
border-bottom: none; // 去掉中间横线
}
/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
text-align: right; // 上边文字靠右
}
/deep/ .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
text-align: left; // 下边文字靠左
}
/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type:before {
content: '';
position: absolute;
width: 1px;
height: 100px; // 斜线长度
top: 0;
left: 0;
background-color: #fff;
opacity: 0.2;
display: block;
transform: rotate(-43deg);
transform: rotate(-71deg);
// transform: rotate(286deg);
-webkit-transform-origin: top;
transform-origin: top;
}
/deep/ .el-table thead.is-group tr:last-of-type th:first-of-type:before {
content: '';
position: absolute;
width: 1px;
height: 100px;
bottom: 0;
right: 0;
background-color: #fff;
opacity: 0.2;
display: block;
transform: rotate(-43deg);
transform: rotate(-70deg);
// transform: rotate(286deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
@media screen and(min-width: 550px) and (max-width: 1430px) {
/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type:before {
transform: rotate(-62deg);
}
/deep/ .el-table thead.is-group tr:last-of-type th:first-of-type:before {
transform: rotate(-62deg);
}
}
@media screen and(min-width: 1430px) and (max-width: 1450px) {
/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type:before {
transform: rotate(-62deg);
}
/deep/ .el-table thead.is-group tr:last-of-type th:first-of-type:before {
transform: rotate(-62deg);
}
}
方式二:参考滑动验证页面
页面放大缩小斜线位置都不受影响
<el-table :data="tableData" border style="width: 100%">
<el-table-column :resizable="false" class-name="column-custom" prop="date" label="日期" width="120">
<template slot="header" slot-scope="scope">
<div class="header-div">
<div class="header-col1">区域</div>
<div class="header-col2">类型</div>
<div class="header-line"></div>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column label="1月"></el-table-column>
<el-table-column label="2月"></el-table-column>
<el-table-column label="3月"></el-table-column>
<el-table-column label="4月"></el-table-column>
<el-table-column label="5月"></el-table-column>
<el-table-column label="6月"></el-table-column>
<el-table-column label="7月"></el-table-column>
<el-table-column label="8月"></el-table-column>
<el-table-column label="9月"></el-table-column>
<el-table-column label="10月"></el-table-column>
<el-table-column label="11月"></el-table-column>
<el-table-column label="12月"></el-table-column>
</el-table>
样式:
/deep/.column-custom {
padding: 0px !important;
}
/deep/.el-table--border .el-table__cell:first-child .cell {
padding: 0 !important;
}
.header-div {
height: 50px;
position: relative;
}
.header-col1 {
position: absolute;
left: 0;
bottom: 0;
}
.header-col2 {
position: absolute;
right: 0;
top: 0;
}
.header-line {
padding-left: 0;
width: 1px;
height: 150px;
transform: rotate(-67deg); /*这里需要自己调整,根据线的位置*/
-webkit-transform-origin: top;
transform-origin: top;
background-color: #fff;
}