我想实现的效果如下图：
微信截图_20191029171825.png
找了一下element的说明文档,里面有个属性render-header
image.png
我看网上都是写原生的createElement,非常的不方便,我们用另外一种方法
先安装相关的插件：
npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --s
之后在.babelrc文件里面加入
"plugins": ["transform-vue-jsx", "transform-runtime"]
然后就可以使用jsx的语句了
<el-table-column header-align="center" align="center" label="推送开关状态" :render-header="handleHelp">
然后在methods中定义方法
handleHelp(){
return(
<el-tooltip class="item" effect="dark" placement="top" content="若已开启推送，关闭后门店、户型和房间数据将不再同步。该开关无法手动调整，详情请联系BU科技中心。">
<div>推送开关状态 <i class="el-icon-question"></i></div>
</el-tooltip>
)
}
下面的css按需引入即可
.el-table th div.tooltip {
display: block;
position: unset;
font-size: unset;
opacity: unset;
}
.el-table th div.el-tooltip {
display: block;
line-height: unset;
}
.el-tooltip__popper {
max-width: 250px;
}
