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] || '']
                    )
                ]
            );
        },

 

效果图：