方法一:
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column label="数量" width="180">
<!-- 在方法二中,无需嵌套下面这行 -->
<el-table-column prop="name" label="Name" />
</el-table-column>
<el-table-column prop="amount1" label="Amount 1" />
<el-table-column prop="amount2" label="Amount 2" />
<el-table-column prop="amount3" label="Amount 3" />
</el-table>
需要注意的是:下列样式在style中加scoped会不生效,可以自行给每个类名加 :deep() 来实现
.el-table thead.is-group th {
background: none;
padding: 0px;
}
.el-table thead.is-group tr:first-of-type th:first-of-type {
border-bottom: none;
/*中间的横线去掉*/
}
.el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
text-align: right;
/*上边文字靠右*/
}
.el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
text-align: left;
/*下边文字靠左*/
}
/*实现斜线代码*/
.el-table thead.is-group tr:first-of-type th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 200px;
/*斜线的长度*/
top: 0;
left: 0;
background-color: grey;
opacity: 0.2;
display: block;
/*调整斜线的角度*/
transform: rotate(286deg);
/*调整斜线的角度*/
-webkit-transform-origin: top;
transform-origin: top;
}
方法二
thead tr:first-child th:first-child {
position: relative;
background: linear-gradient(
28deg,
transparent 50%,
#d7d5d5 50%,
#d7d5d5 50.5%,
transparent 50.5%
);
}
thead tr:first-child th:first-child .cell{
position: absolute;
top: 0px;
right: 0;
width: 100px;
font-size: 14px;
}
thead tr:first-child th:first-child:after{
content: 'Name';
position: absolute;
left: 10px;
// bottom: 10px;
color: #909399;
}
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片,如果不指定方向,默认从上到下渐变。
linear-gradient(direction, color-stop1, color-stop2, ...)
direction:用角度值指定渐变的方向(或角度)。
color-stop:用于指定渐变的起止颜色。
background-image: linear-gradient(45deg,red, yellow, blue);