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; }

效果

 链接：https://www.dianjilingqu.com/614426.html