<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] || ''] )
?????????????????????????????]
?????????????????)
?????????}
}
????????????????????????????????????????????????????????????????????????????????????????效果圖
