Vue 列表標題換行且劇中

 

 

 

列表表頭列屬性
<el-table-column   prop="earningsTotal"  
                              label="累計收益率 (今年以來)" 
                              min-width='110px'   // 設置最大寬度

                               header-align="center"//設置列表表頭居中

                              :render-header="renderHeader">  // 列標題 Label 區域渲染使用的 Function
</el-table-column>

腳本方法：

methods:{
        renderHeader(createElement, { column}) { 
                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',     //創建最外層的標簽可隨意
                             [ 
                                 createElement('span', {  // 創建第一個元素的標簽可隨意
                                 attrs: { type: 'text' } 
                                 },[labelArr[0]] ), 
                                 createElement('p', {  // 創建第二個元素的標簽可隨意 
                                 attrs: { type: 'text', style: 'font-size:12px' } // 給分割的某個元素單獨加樣式
                                 }, [labelArr[1] || ''] ) 
                             ]
                 ) 
         }
}