在做项目是接到一个需求,表头第一个单元格斜线分割,效果如下图
刚开始把我弄得有点懵,然后去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; }
效果
标签:el,right,斜线,表头,table,left From: https://www.cnblogs.com/cstd/p/16902412.html