0
点赞
收藏
分享

微信扫一扫

element ui el-table 如何实现带斜线的双表头


要实现的效果如图:

element ui el-table 如何实现带斜线的双表头_嵌套

实现思路

通过嵌套表头将两个标题设置在一个单元格内,再通过 CSS 样式增加斜线效果。

知识点:el-table、::before、transform

实现的代码

<el-table :data="tableData" border>
<!--重点代码:采用嵌套的方式-->
<el-table-column label="数据" align="right" width="150">
<el-table-column prop="name" label="数据指标" width="150">
</el-table-column>
</el-table-column>
<el-table-column
v-for="(col, i) in columnList"
:key="i"
:prop="col.prop"
:label="col.label"
align="center"
>
<template v-if="col.children">
<el-table-column
v-for="(item, index) in col.children"
:key="index"
:prop="item.prop"
:label="item.label"
>
</el-table-column>
</template>
</el-table-column>
</el-table>
<style scoped>
/*表头斜线*/

/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/
::v-deep .el-table thead.is-group th {
background: none;
padding: 0px;
}

::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 div.cell {
text-align: right;/*上边文字靠右*/
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
text-align: left;/*下边文字靠左*/
}

/*核心代码*/
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 80px;/*斜线的长度*/
top: 0;
left: 0;
background-color: #18449C;
opacity: 1;
display: block;
transform: rotate(-61deg);/*调整斜线的角度*/
-webkit-transform-origin: top;
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: 80px;/*斜线的长度*/
bottom: 0;
right: 0;
background-color: #18449C;
opacity: 1;
display: block;
transform: rotate(-62deg);/*调整斜线的角度*/
-webkit-transform-origin: bottom;
transform-origin: bottom;
}

</style>


举报

相关推荐

0 条评论