最美情侣中文字幕电影,在线麻豆精品传媒,在线网站高清黄,久久黄色视频

歡迎光臨散文網(wǎng) 會(huì)員登陸 & 注冊(cè)

el-table表頭斜線

2022-11-18 10:46 作者:限量版范兒  | 我要投稿

在做項(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; }

效果

?鏈接:https://www.dianjilingqu.com/614426.html

el-table表頭斜線的評(píng)論 (共 條)

分享到微博請(qǐng)遵守國(guó)家法律
昌吉市| 河北省| 罗江县| 防城港市| 申扎县| 昭通市| 瓦房店市| 景泰县| 洞头县| 晋州市| 崇信县| 固原市| 丰宁| 阿巴嘎旗| 福州市| 彭泽县| 清流县| 上犹县| 同江市| 嫩江县| 会理县| 留坝县| 剑川县| 铁岭市| 东丽区| 晋江市| 久治县| 白城市| 交口县| 临武县| 崇明县| 渭源县| 龙山县| 金堂县| 西华县| 固镇县| 湖口县| 什邡市| 祁门县| 康马县| 铜鼓县|