element-ui 怎么在表格头部添加一个Tooltip

我想实现的效果如下图：

微信截图_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;
}