element 表格表頭換行,指定某字大小

<el-table-column? ?prop="earningsTotal"?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? label="累計(jì)收益率 (今年以來)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? min-width='110px'? ?// 設(shè)置最大寬度
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :render-header="renderHeader">? // 列標(biāo)題 Label 區(qū)域渲染使用的 Function
</el-table-column>?


methods:{
????????renderHeader(createElement, { column, _self }) {
? ??????????????console.log(createElement)? ????//??function (a, b, c, d) { return createElement(vm, a, b, c, d, true); };
????????????????const label = column.label
? ? ? ? ? ? ? ? const labelArr = label.split(' ')
? ? ? ? ? ? ? ? return createElement(
?????????????????????????????'span', ????//創(chuàng)建最外層的標(biāo)簽可隨意
?????????????????????????????[
?????????????????????????????????createElement('span', {? //?創(chuàng)建第一個(gè)元素的標(biāo)簽可隨意
?????????????????????????????????attrs: { type: 'text' }?
?????????????????????????????????},[labelArr[0]] ),
?????????????????????????????????createElement('p', {? //?創(chuàng)建第二個(gè)元素的標(biāo)簽可隨意?
?????????????????????????????????attrs: { type: 'text', style: 'font-size:12px' } // 給分割的某個(gè)元素單獨(dú)加樣式
?????????????????????????????????}, [labelArr[1] || ''] )
?????????????????????????????]
?????????????????)
?????????}
}

????????????????????????????????????????????????????????????????????????????????????????效果圖

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容