el-table表頭斜線

2022-11-18 10:46 作者:限量版范兒 0人讀過(guò) | 我要投稿

在做項(xiàng)目是接到一個(gè)需求，表頭第一個(gè)單元格斜線分割，效果如下圖

?

?剛開(kāi)始把我弄得有點(diǎn)懵，然后去element官網(wǎng)看了看文檔，發(fā)現(xiàn)el-table支持自定義表頭，那問(wèn)題就好解決了，直接上代碼

注意el-table列寬是自適應(yīng)，當(dāng)寬度不一致時(shí)會(huì)導(dǎo)致斜線位置不對(duì)，解決辦法就是給需要的列添加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"> ? ? ? ? ? ? ? ? ? ? ? ?學(xué)科 ? ? ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ? ? ? ?<div class="left"> ? ? ? ? ? ? ? ? ? ? ? ?{{ type === 'area' ? '學(xué)校名稱(chēng)' : '班級(jí)名稱(chēng)' }} ? ? ? ? ? ? ? ? ? ?</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; }

效果