element-ui自定義table表頭

場景描述：

這個需求的場景很簡單，表頭自定義居中顯示

 <el-table-column show-overflow-tooltip prop="telephone" label="填寫 但不完整" width="100" :render-header="renderHeader">
</el-table-column>

renderHeader(createElement, { column, _self }) {
            let label = column.label;
            let labelArr = label.split(' ');
             return createElement(
                'div',
                {
                'class': 'header-center'
                },
                [
                    createElement('div', {
                            attrs: { type: 'text' },
                        }, [labelArr[0]]
                        ),
                        createElement('div', {
                            attrs: { type: 'text' },
                        }, [labelArr[1] || '']
                    )
                ]
            );
        },

 

效果圖：