el-table表头斜线

在做项目是接到一个需求，表头第一个单元格斜线分割，效果如下图

 

 刚开始把我弄得有点懵，然后去element官网看了看文档，发现el-table支持自定义表头，那问题就好解决了，直接上代码

注意el-table列宽是自适应，当宽度不一致时会导致斜线位置不对，解决办法就是给需要的列添加width

HTML部分

<el-table v-if="type !== 'class'" :data="data" border :header-cell-class-name="headerStyle">
            <el-table-column prop="name" width="200">
                <template slot="header">
                    <div class="right">
                        学科
                    </div>
                    <div class="left">
                        {{ type === 'area' ? '学校名称' : '班级名称' }}
                    </div>
                </template>
            </el-table-column>
</el-table>

css部分

.left {
    text-align: left;
    position: relative;
    padding-left: 10px;
}

.left::after {
    content: '';
    width: 100%;
    height: 0px;
    position: absolute;
    border-bottom: 1px solid $--theme-color;
    top: 0;
    left: 0;
    transform: rotate(12deg);
}

.right {
    text-align: right;
    padding-right: 10px;
}

效果